如果元素是由指令生成的，則ng-click不起作用

Question

我創建一個directive在angularJS將與一些元素（分頁），這是由生成的元素取代我的自定義元素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 。

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

Answer 1

您的指令中有一個單獨的作用域，要訪問父函數，您需要傳遞該函數，為此您可以在指令中使用“＆”。

scope:{
    totalCount: '@',
    fnt : '&'
 }

將其綁定到ng-click ng-click="fnt()"

並從父級傳遞它，元素將是這樣的：

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

Answer 2

您需要先使用$ compile，然后再將其添加到DOM中，例如，

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

此問題類似於使用AngularJS click事件添加的動態內容不適用於添加的內容

更新：您可以通過=控件進行雙向綁定，例如，

scope: {
  control: '='
},

最終更新，無需添加另一個調用$scope.$parent.function1(value); 在您的function2 call ，

$scope.function2 = function(value){
    console.log('function2 value = '+value);
    $scope.$parent.function1(value);
}

演示

Answer 3

要在指令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();
  }
};
});