нг-клик не работает, если элемент генерируется в соответствии с директивой

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> элемента, function1 из AppController не вызывается.

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 директивной рамка зовет и печать значения в консоли, но $ рамки.funcToCall (значение) дает ошибку в

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

Update3

Создано PLUNKER

Answer 1

Для вызова внешней функции (функции управления) в вашем случае из директивы, когда директива имеет 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(); 
    } 
}; 
}); 

Answer 2

Вы должны использовать $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: '=' 
}, 

Final Обновлено не нужно добавить еще один вызов $scope.$parent.function1(value); в вашем function2 call как,

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

Demo

Answer 3

У вас есть изолированная область действия в вашей директиве, чтобы получить доступ к родительскому вам нужно будет передать эту функцию, и для этого вы можете использовать «&» в своей директиве.

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

связывают его нг нажмите ng-click="fnt()"

и передать его от родительского элемента будет выглядеть следующим образом:

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