如果元素是由指令生成的,则 ng-click 不起作用
ng-click is not working if the element is generated by directive
我正在 angularJS
中创建一个 directive
,它将用一些元素(分页)替换我的自定义元素,由 directive
生成的元素具有 ng-click
属性和 ng-click
属性的值是控制器的功能,但 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
没有被调用。
更新1
实际上我的 directive
有 isolate-scope
,如果我用 $($element).append($compile(link)($scope));
编译元素,那么元素与指令的范围链接,但我想用父级的范围编译元素
更新2
我对我的元素进行了一些更改,例如
<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>
更新3
已创建 PLUNKER
您需要先使用 $compile,然后再将其添加到 DOM 中,例如,
var link = '<li><a href="javascript:;" ng-click="function1('+i+');">'+i+'</a></li>';
$($element).append($compile(link)($scope));
这个问题类似于Dynamic content added with AngularJS click event not working on the added content
更新:您可以通过 =
控制双向绑定,例如,
scope: {
control: '='
},
最终更新无需在您的 function2 call
中添加另一个呼叫 $scope.$parent.function1(value);
,
$scope.function2 = function(value){
console.log('function2 value = '+value);
$scope.$parent.function1(value);
}
您的指令中有一个独立的作用域,要访问您需要传递该函数的父函数,为此您可以在指令中使用“&”。
scope:{
totalCount: '@',
fnt : '&'
}
绑定到 ng-click ng-click="fnt()"
并从父级传递它,元素将像这样:
<my-element totalCount="5" fnt="parentFunction"></my-element>
当指令设置了 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();
}
};
});
我正在 angularJS
中创建一个 directive
,它将用一些元素(分页)替换我的自定义元素,由 directive
生成的元素具有 ng-click
属性和 ng-click
属性的值是控制器的功能,但 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
没有被调用。
更新1
实际上我的 directive
有 isolate-scope
,如果我用 $($element).append($compile(link)($scope));
编译元素,那么元素与指令的范围链接,但我想用父级的范围编译元素
更新2
我对我的元素进行了一些更改,例如
<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>
更新3
已创建 PLUNKER
您需要先使用 $compile,然后再将其添加到 DOM 中,例如,
var link = '<li><a href="javascript:;" ng-click="function1('+i+');">'+i+'</a></li>';
$($element).append($compile(link)($scope));
这个问题类似于Dynamic content added with AngularJS click event not working on the added content
更新:您可以通过 =
控制双向绑定,例如,
scope: {
control: '='
},
最终更新无需在您的 function2 call
中添加另一个呼叫 $scope.$parent.function1(value);
,
$scope.function2 = function(value){
console.log('function2 value = '+value);
$scope.$parent.function1(value);
}
您的指令中有一个独立的作用域,要访问您需要传递该函数的父函数,为此您可以在指令中使用“&”。
scope:{
totalCount: '@',
fnt : '&'
}
绑定到 ng-click ng-click="fnt()"
并从父级传递它,元素将像这样:
<my-element totalCount="5" fnt="parentFunction"></my-element>
当指令设置了 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();
}
};
});