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

Question

我正在创建一个directive在angularJS这将用一些元素(分页)替换我的自定义元素，这些元素是由 directive 生成的。有ng-click属性和 ng-click 的值属性是 Controller 的功能，但 ng-click不工作

该元素是

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

Controller 是

.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没有被调用。

更新1

其实是我的directive有isolate-scope如果我用 $($element).append($compile(link)($scope)); 编译元素然后该元素与指令的范围链接，但我想用父级的范围编译该元素

更新2

我对 my-element 进行了一些更改，例如

<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

Answer 1

您的指令中有一个独立的作用域，要访问父函数，您需要传递该函数，为此您可以在指令中使用“&”。

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

将其绑定(bind)到 ng-click ng-click="fnt()"

要从父元素传递它，元素将如下所示:

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