angular 自定义指令控制器不响应 ng-click

angular custom directive controller not responding to ng-click

我有一个自定义指令,我在其中指定了控制器。我在控制器中设置的属性很好地插入到模板中,但函数不响应模板的 ng-click。我正在使用 angular 版本 1.3.15。这是我的问题的简化版本:

myModule.directive('myDirective',function(){
        return {
            scope:{},
            template:
            '<div>' +
                '<button ng-click="myFn()">click me {{test}}</button>' +
            '</div>',
            controller:['$scope',function($scope){
                $scope.test = "please";
                $scope.myFn = function(){
                    alert('clicked!');
                };
            }]
        };
    });

编辑:这是我的问题的更完整版本:

module
        .provider('PopoverDirectiveBuilder', function () {
            this.$get = [function () {
                return function directiveBuilder(config) {
                    var template = config.template;
                    var controller = config.controller;
                    return {
                        restrict: "E",
                        scope: {},
                        template: 
                        '<div >' +
                            template +
                        '</div>',

                        controller: controller,
                        compile: function (tElem, attrs) {
                            return {
                                post: function postLink(scope, iElement, iAttrs, controller) {
                                    //add some properties to the controller to handle the directive showing and hiding
                                }
                            };
                        }
                    };
                };
            }];
        })
        .directive('myPopover',['PopoverDirectiveBuilder',function(PopoverDirectiveBuilder){
            return PopoverDirectiveBuilder({
                template:'<div><button ng-click="myFn()">click  me {{test}}</button></div>',
                controller:['$scope',function($scope){
                    $scope.test = "please";
                    $scope.myFn = function(){
                        alert('clicked');
                    };
                }]
            });
        }])
;

我正在创建一个 "popover builder" 函数,当传递一些参数时,returns 一个指令定义对象。当我在 angular batarang(稳定版)中检查时,$scope.myFn 为空,但定义了 $scope.test。

我觉得这与隔离范围有关,但 {{test}} 插值得很好。

我的问题已经解决了。我没有将此包含在我的问题中,因为我认为它无关紧要。每当用户触发它时,我都会从 dom 中删除并重新添加我的弹出窗口。起初,我只是使用常规的 dom 运算符,例如 popover.parentNode.removeChild(popover);这些具有不破坏范围的副作用。然后我 jquery 包裹了我的元素并开始使用 popover.remove(); Angular 修补了 jquery 的删除函数,也破坏了作用域。由于该元素仍然存在于内存中,因此当我将它重新添加到 dom 时,插值到它的字符串保留在该元素上,但范围的其余部分没有被复制。