我正在开发一个指令,该指令根据在模板中定义的click事件(ng- click)来显示和隐藏其内容。在某些使用该指令的视图上,我希望能够知道该指令当前是显示还是隐藏其内容,因此我可以响应DOM更改。该指令具有单独的作用域,当该指令被“切换”时,我试图通知父作用域。我正在尝试通过将回调函数传递给使用该指令的指令来实现此目的,该指令可以在指令的状态更改(即隐藏或显示)时调用
我不确定该指令的状态(隐藏或显示)存储在该指令的隔离范围中,并且是在ng- click之后确定的,因此我不确定该如何正确实现。因此,我需要从指令中而不是从视图中调用父作用域的函数。
举例说明,这将使WAAY更有意义。这是一个笨拙的演示我想做的事情:
http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info
var app = angular.module('main-module',[]) app.controller('MainController', function($scope){ $scope.myValue = 'test value'; $scope.parentToggle = function(value){ $scope.myValue = value; }; }); app.directive('toggle', function(){ return { restrict: 'A', template: '<a ng-click="toggle();">Click Me</a>', replace: true, scope: { OnToggle: '&' }, link: function($scope, elem, attrs, controller) { $scope.toggleValue = false; $scope.toggle = function () { $scope.toggleValue = !$scope.toggleValue; $scope.OnToggle($scope.toggleValue) }; } }; });
我对Angular比较陌生。首先这是一个坏主意吗?我应该使用服务还是其他东西而不是传递函数引用?
谢谢!
更新资料
您还可以使用&绑定根作用域的功能(实际上是的目的&)。
&
为此,需要稍微更改指令:
app.directive('toggle', function(){ return { restrict: 'A', template: '<a ng-click="f()">Click Me</a>', replace: true, scope: { toggle: '&' }, controller: function($scope) { $scope.toggleValue = false; $scope.f = function() { $scope.toggleValue = !$scope.toggleValue; $scope.toggle({message: $scope.toggleValue}); }; } }; });
您可以这样使用:
<div toggle="parentToggle(message)"></div>
朋克
您可以使用绑定功能=。另外,请确保您的范围和标记中的属性名称匹配(AngularJS将CamelCase转换为 破折号 )。
=
之前:
scope: { OnToggle: '&' }
后:
scope: { onToggle: '=' }
此外,请勿on-toggle="parentToggle({value: toggleValue})"在主模板中使用。您不希望调用函数,而只是将函数的 指针 传递给指令。
on-toggle="parentToggle({value: toggleValue})"