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

我正在

angularJS

中创建一个

指令

，它将用一些元素（分页）替换我的自定义元素，

指令生成的元素具有
ng click
属性，
ng click
属性的值是控制器的功能，但
ng click
不起作用

元素是

<my-element totalCount="5"></my-element>

指令是

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

指导

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

指令（'myElement'，函数（$compile）{
返回{
...
...
范围：{
totalCount:“@”，
funcToCall:“&”
},
...
控制器：函数（$scope、$element、$attrs）{
$scope.draw=函数（）{
....
....
var link=$（“
”）；
$（$element）.append（$compile（link）（$scope））；
....
....
}
$scope.function2=函数（值）{
log（'function2值='+值）；
$scope.funcToCall（值）；
}
}
....
....
};
});

在本例中，指令作用域的function2正在控制台中调用并打印该值，但$scope.funcToCall（value）给出的错误如下：

TypeError: Cannot use 'in' operator to search for 'function1' in <3>

TypeError:无法使用'in'运算符在中搜索'function1'

更新3

创建了在将其添加到DOM中之前需要使用的

var link = '<li><a href="javascript:;" ng-click="function1('+i+');">'+i+'</a></li>';
$($element).append($compile(link)($scope));

最终更新无需添加另一个调用

$scope.$parent.function1（值）

在您的

函数2调用中

$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>

若要在指令设置了隔离范围时从指令调用外部函数（控制器函数），需要将控制器函数传递给指令，如下所示


然后，该函数将在指令中作为本地隔离范围提供，如下所示

范围：{
totalCount:“@”，
funcToCall:“&”
}，

此外，我们可以在指令控制器内部使用函数来调用这个外部函数（当然也有其他方法），如

最后，我们可以在指令的元素中调用$scope.function2，如
var-link=$（'
'+i+'
'）

下面是完整的指令代码

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

app.directive（'myElement'，函数（$compile）{
返回{
限制：'E'，
替换：正确，
范围：{
totalCount:“@”，
funcToCall:“&”
},
模板：“
”，
控制器：函数（$scope、$element、$attrs）{
$scope.draw=函数（）{
$（$元素）.empty（）；
对于（var i=1；如果function1是在AppController中定义的而不是在指令中定义的，那么如果我在指令中定义function1，则$compile可以正常工作，但它没有调用AppController1的function1，因为指令具有隔离作用域，元素链接到指令作用域，但我希望将元素链接到父作用域添加了墨水请查看当您单击任何页码时，您将得到错误父作用域限制在
myElement
指令中，因为它设置了
隔离作用域
。要从指令调用控制器中的函数，需要将控制器函数传递到指令，并使用
和
内部指令将其称为作用域。请参阅。希望这有帮助，如果可能的话，创建一个小提琴或plunker来复制此问题。@SameerK plunker链接已添加。请查看当您单击任何页码时，您将在指令调用
中得到错误您错过的传递值。请参阅处的工作plunker。我已修改了参数传递给控制器函数。使用reference方法。@SameerK您检查过控制台日志了吗？请看，它不工作，function2正在打印值，但是父作用域的function1没有被调用（控制台中出现错误），这不是plunker没有得到更新的原因。进行以下更改，它就会工作。
和
$scope.funcToCall（）（值）
Plunker链接已添加请在单击任何页码时查看，您将获得error@Dau修复了将父函数传递给fnt=“parentFunction”而不是fnt=“parentFunction（）的问题
scope:{
    totalCount: '@',
    fnt : '&'
 }

<my-element totalCount="5" fnt="parentFunction"></my-element>

$scope.function2 = function(value){       
      $scope.funcToCall()(value);
    }

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