如果元素由指令生成,则ng-click不起作用
我正在angularJS
创build一个directive
, angularJS
用一些元素(分页)replace我的自定义元素,由directive
生成的元素具有ng-click
属性, ng-click
属性的值是控制器的function,但是ng-click
不起作用
元素是
<my-element totalCount="5"></my-element>
控制器是
.controller('AppControler',['$scope'],function($scope){ $scope.function1 = function(value){ console.log('in function1 value = '+value); } });
该指令是
.directive('myElement',function(){ return{ restrict: 'E', replace: true, scope:{ totalCount: '@' }, template: '<ul class="pagination"></ul>`, controller: function($scope, $element, $attrs){ $scope.draw = function(){ $($element).empty(); for (var i=1; i<=$scope.totalCount; i++){ var link = $('<li><a href="javascript:;" ng-click="function1('+i+');">'+i+'</a></li>'); $($element).append(link); } } }, link: function(scope, element, attr, controller){ attr.$observe('totalCount', function(){ scope.draw(); }); } }; });
但是当我点击<li>
元素时, AppController
的function1
不会被调用。
UPDATE1
其实我的directive
具有isolate-scope
,如果我用$($element).append($compile(link)($scope));
那么与指令的范围链接的元素,但我想编译与父母的范围的元素
UPDATE2
我已经对我的元素做了一些改变
<my-element totalCount="5" func-to-call="function1()"></my-element>
在指令中
.directive('myElement',function($compile){ return{ ... ... scope:{ totalCount: '@', funcToCall: '&' }, ... controller: function($scope, $element, $attrs){ $scope.draw = function(){ .... .... var link = $('<li><a href="javascript:;" ng-click="function2('+i+');">'+i+'</a></li>'); $($element).append($compile(link)($scope)); .... .... } $scope.function2 = function(value){ console.log('function2 value = '+value); $scope.funcToCall(value); } } .... .... }; });
在这种情况下,指令作用域的function2正在调用并在控制台中打印该值,但$ scope.funcToCall(value)给出的错误为
TypeError: Cannot use 'in' operator to search for 'function1' in <3>
UPDATE3
创造了PLUNKER
当指令具有isolated scope
设置时,要从您的指令中调用外部函数(控制器函数),需要将控制器函数传递给下面的指令。
<my-element func-to-call="function1" total-count="5"></my-element>
那么这个函数将在指令中作为本地隔离范围使用
scope: { totalCount: '@', funcToCall: '&' },
此外,我们可以在指令控制器内部调用这个外部函数(当然也有其他方法)
$scope.function2 = function(value){ $scope.funcToCall()(value); }
最后,我们可以在指令元素中调用$ scope.function2,例如var link = $('<li><a ng-click="function2('+i+');">'+i+'</a></li>');
以下是完整的指令代码。
app.directive('myElement', function($compile){ return{ restrict: 'E', replace: true, scope: { totalCount: '@', funcToCall: '&' }, template: '<ul class="pagination"></ul>', controller: function($scope, $element, $attrs){ $scope.draw = function(){ $($element).empty(); for (var i=1; i<$scope.totalCount; i++){ var link = $('<li><a ng-click="function2('+i+');">'+i+'</a></li>'); $($element).append($compile(link)($scope)); } } $scope.function2 = function(value){ //console.log('function2 value = '+value); $scope.funcToCall()(value); } }, link: function(scope, element, attr, controller){ scope.draw(); } }; });
你的指令中有一个独立的范围,为了访问父函数,你需要传递这个函数,并且你可以在你的指令中使用“&”。
scope:{ totalCount: '@', fnt : '&' }
绑定到ng-click ng-click="fnt()"
并从父母传递它的元素将是这样的:
<my-element totalCount="5" fnt="parentFunction"></my-element>
你需要使用$编译之前,在DOM中添加它,
var link = '<li><a href="javascript:;" ng-click="function1('+i+');">'+i+'</a></li>'; $($element).append($compile(link)($scope));
这个问题类似于AngularJS单击事件添加的dynamic内容不能处理添加的内容
更新:你可以通过=
控制双向绑定,
scope: { control: '=' },
最终更新不需要添加另一个调用$scope.$parent.function1(value);
在你的function2 call
,
$scope.function2 = function(value){ console.log('function2 value = '+value); $scope.$parent.function1(value); }
演示