Angular指令，綁定點擊事件，以外部元素不工作

Question

我想創建一個自定義事件來切換Angular。該指令稱爲可切換。

起初聽起來微不足道，但棘手的是，我希望能夠使用頁面上的任何按鈕或鏈接進行切換。

我寫的代碼如下

指令

'use strict'; 

angular.module('onsComponents') 
.directive('togglable', function() { 
return { 
    restrict: 'A', 
    transclude: true, 
    scope: { 
    togglerId: '@', 
    show: '@' 
    }, 
    link: function(scope, element, attrs) { 
    if (!scope.togglerId) { 
     console.error("Toggler id must be given") 
     return 
    } 

    scope.visible = (scope.show === 'true') 
    scope.toggle = function() { 
     alert("Before " + scope.visible) 
     scope.visible = !scope.visible 
     alert("After " + scope.visible) 
    } 

    //Bind click event to given dom element 
    angular.element('#' + scope.togglerId).bind("click", function() { 
     scope.toggle() 
    }) 


    }, 
    templateUrl: 'app/components/toggler/toggler.html' 
    } 
    }) 

模板

<div ng-transclude ng-show="visible"> 

</div> 

觀

<a href="" id="toggleButton" >Click me to toggle</a> 
<div togglable toggler-id="toggleButton"> 
    Hey 
</div> 

切換鏈接似乎正在工作。當鏈接被點擊時，我可以看到警報。麻煩的是內容沒有出現。看起來鏈接與內容不在同一範圍內，當我這樣做時，創建另一個範圍。

如果我移動模板內的點擊鏈接，如下所示。但那不是我想要的。

<!-- Move the link inside template --> 
<a href="" ng-click="toggle()" >Click me to toggle</a> 
<div ng-transclude ng-show="visible"> 

</div> 

那我該如何做到這一點？

Answer 1

如果您每次更換Angular手錶以外的 Angular，您必須致電scope.$apply()。通過外我的意思是使用jQuery API綁定事件 - 或任何其他方式除了角的本地ng-click等

所以做之一：

scope.toggle = function() { 
    scope.visible = !scope.visible; 
    scope.$apply(); 
} 

或者：

scope.toggle = function() { 
    scope.$apply(function() { 
     scope.visible = !scope.visible; 
    }); 
} 

Answer 2

這是更多角度類型創建兩個指令和一個服務，爲此連接它們。作爲一個大致的輪廓：

app.service('toggleService', function() { 
    var toggleables = {}; 

    this.registerToggleable = function(key, f) { 
     toggleables[key] = f; 
    } 

    this.toggle = function(key) { 
     var f = toggleables[key]; 
     f(); 
    } 
}); 

app.directive('toggler', function(toggleService) { 
    return { 
     link: function(scope, elem, attrs) { 
      elem.bind("click", function() { 
       toggleService.toggle(attrs.toggler); 
       // because the event handler operates outside of angular digest cycle 
       scope.$apply(); 
      }); 
     } 
    } 
}) 

app.directive('toggleable', function(toggleService) { 
    return { 
     link: function(scope, elem, attrs) { 
      function toggle() { 
       scope.visible = !scope.visible; 
      } 

      toggleService.registerToggleable(attrs.toggleable, toggle); 
     } 
    } 
}); 

以上將需要調整實際做什麼除了設置範圍的變量，但你可以使用這兩個像這樣：

<a href="" toggler="foo" >Click me to toggle</a> 
<div toggleable="foo"> 
    Hey 
</div> 

這你可以在元素本身聲明切換功能，而不需要基於ID的查找魔術。