Question

我在嵌套的Directives中使用Factory函数时遇到了一些麻烦。

主要代码正在运行，因为它是在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;
            }
        }
    };
});

我知道它无效，因为任务指令无法识别模态指令中的 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'
    };
});

在嵌套指令中使用Factory函数

1 个答案: