在嵌套指令中使用工厂函数

Question

我在嵌套指令中使用工厂函数时遇到一些问题。

主要代码可以运行，因为它是在 Controller 上测试的。我所有的 JavaScript 文件都在开头加载。

场景是这样的：

我使用路由访问 todoController.js，然后它调用 taskList 指令，该指令调用任务指令。

我正在尝试实现此代码(modalService.js):

(function(angular) {
    gameOnApp.directive('modalButton', function($compile) {
        return {
            restrict: 'A',
            priority: 1001,
            terminal: true,
            compile: function(elm, attrs) {
                elm.attr('ng-click', "modal.openModal('" + attrs.modalId + "')");

                elm.removeAttr('modal-button');
                elm.removeAttr('modal-id');

                var fn = $compile(elm);
                return function(scope){
                    scope.modal = Modal;
                    fn(scope);
                };
            }
        }
    });

    gameOnApp.factory('Modal', function(){
        return {
            openModal: function(modalId) {
                console.log(modalId);
            }
        }
    });
})(window.angular);

在我的 HTML 上，我这样称呼它：

<li>
    <span modal-button modal-id="12"><i class="fa fa-edit fa-fw"></i> Edit</span>
</li>

HTML 回复是：

<li>
    <span ng-click="modal.openModal('12')"><i class="fa fa-edit fa-fw"></i> Edit</span>
</li>

以及任务指令与模态代码：

gameOnApp.directive('task', function($compile, Modal) {
    return {
        restrict: 'E',
        scope: false,
        templateUrl: 'app/components/todo/taskView.html',
        compile: function(elm, attrs){
            return function(scope){
                scope.modal = Modal;
            }
        }
    };
});

而且我知道它不起作用，因为 task Directive 无法识别来自 Modal 的 ng-click 函数指令.

我该如何解决这个问题？

Answer 1

我已经用AngularJS的方法解决了。

重写modalService.js为：

(function(angular) {
    gameOnApp.directive('modalButton', function($compile, Modal) {
        return {
            restrict: 'A',
            priority: 1001,
            terminal: true,
            compile: function compile(elm, attrs, transclude) {
                return function postLink(scope, iElement, iAttrs, controller) {
                    iElement.attr('ng-click', "modal.openModal('" + attrs.modalId + "')");

                    iElement.removeAttr('modal-button');
                    iElement.removeAttr('modal-id');

                    scope.modal = Modal;

                    var fn = $compile(iElement);
                    fn(scope);
                }
            }
        }
    });

    gameOnApp.factory('Modal', function(){
        return {
            openModal: function(modalId) {
                console.log(modalId);
            }
        }
    });
})(window.angular);

使用编译函数和postLink，它保留了ng-click属性，如如果它一直在那里。

而且，我只需要清理我的 任务服务：

gameOnApp.directive('task', function($scope) {
    return {
        restrict: 'E',
        templateUrl: 'app/components/todo/taskView.html'
    };
});

在嵌套指令中使用工厂函数

Use Factory function inside nested Directive

javascript

angularjs

angularjs-directive

angularjs-scope