自定義指令在角

你好，我有一個漢堡包菜單以下指令：自定義指令在角

angular.module('app.directives') 
    .directive('hamburger', hamburger); 

    // Injecting Dependencies 
    hamburger.$inject = ['$rootScope', '$timeout']; 

    // Directive's Function, Where All Code is Declared and Executed 
    function hamburger($rootScope, $timeout) { 
     return { 
      restrict: 'E', 
      scope: { 
       open: '=' 
      }, 
      templateUrl: 'tpls/directives/hamburger.html', 
      link: function (scope, elem, attr, ctrl) { 

       scope.$watch('open', function(newValue, oldValue) { 

        if (newValue == true) { 
         $timeout(function() { 
          elem.addClass("open"); 
         }, 2000); 

         console.log("This is true"); 
        } 
        else { 
         $timeout(function() { 
          elem.removeClass("open"); 
         }, 2000); 

         console.log("This is false"); 
        } 

       }); 


      } 
     } 
    }

這是模板：

<div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div>

這是我如何使用它在我的觀點：

<hamburger class="menu-btn2 pull-left" snap-toggle="left" open="vm.toggleMenu" ng-click="toggle()" ng-dblclick="doNothing()"></hamburger>

現在我在我的視圖中有一個函數，它可以在點擊時向元素添加一個類。這會打開一個側面菜單。

現在當我的菜單打開時，我想通過添加一個「打開」類來更改我的菜單圖標。

在我的指令中，我有一個名爲「open」的屬性，它綁定到我的控制器和我的指令。在我的指令鏈接函數我有一個手錶，應該觀察變量綁定到「打開」的值，當它變爲真時它應該是一個類「打開」的元素，當它變成「假」它應該從元素中移除「open」類。

我已經嘗試了一切至今，但似乎無法得到這個工作。在我的終端中沒有顯示錯誤，我嘗試在我的$ watch中執行console.log()以查看它是否實際檢測到值發生了更改，但那也不起作用，我的控制檯中沒有記錄任何內容。

這是我的切換功能：

vm.toggleMenu = false; 
vm.toggle = function() { 
    vm.toggleMenu = !vm.toggleMenu; 
};

來源

2016-06-13 user3718908

這很可能是您使用了錯誤的綁定類型，「@」綁定是針對字符串的。你可能想用'='做一個雙向綁定。閱讀更多：https://blog.umur.io/2013/07/02/angularjs-directives-using-isolated-scope-with-attributes/ –

是的，我已經知道了。實際上，當它不起作用時，我實際上使用了「=」我將其更改爲「@」。 – user3718908

這段代碼看起來不錯，你有控制器的代碼是否附加到''？ – CShark

好了，所以我發現了什麼問題，我用的是controllerAs語法從而創建我的控制器的一個實例（我如何相信它的工作原理）爲VM 。出於某種原因，我仍然不完全明白，我無法將該屬性綁定到該實例中的變量。它工作時，我把它改爲scope.toggleMenu而不是vm.toggleMenu。

我對angularjs相當陌生，所以我將假設雙向綁定只能與作用域變量一起工作，或者當您不使用ControllerAs語法時。

來源

2016-06-13 22:32:04 user3718908

自定義指令在角

回答

相關問題