如果元素由指令生成,则ng-click不起作用

我正在angularJS创build一个directiveangularJS用一些元素(分页)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>元素时, AppControllerfunction1不会被调用。

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); } 

演示