Angular指令使用两次，覆盖元素

29 浏览
0 Comments

Angular指令使用两次，覆盖元素

我试图编写一个简单的指令来控制模态框，以便在提交其中的表单时关闭它们。

我有两个模态框：登录模态框和注册模态框，分别在我的html中排序。

这些模态框在一个名为modals.html的文件中，该文件在ng-include中被调用，在ng-include中也被调用，所以我们在这里有一个子范围的子范围。

我的指令

.

directive('myModal', function() {
    return {
        restrict: 'A',
        scope : { },
        link: function(scope, element, attr) {
            scope.$parent.$parent.$parent.dismiss = function() {
                console.log(element.hasClass('in')); //返回false
                element.modal('hide');// 不起作用，因为element始终是第二个模态框
                };
            $(element).bind('shown.bs.modal', function () {
                if (!scope.$$phase && !scope.$root.$$phase)
                    scope.$parent.$parent.$parent.$apply();
                });
            }
        };
});

我不知道为什么在`link`函数中的元素被最后一个元素覆盖？

我将`my-modal`指令应用于我的两个模态框，但我打开了第一个。

非常感谢任何帮助。

0

1 答案

0 Comments

在这段内容中，提到了一个问题：Angular指令被使用两次，覆盖了元素。问题的原因是指令中的$parent.$parent.$parent指向的是同一个祖父级元素，因此只有最后一个指令才会真正定义grandOldParent.dismiss函数。这段内容还提到了一些解决方法，包括避免使用$parent，使用继承作用域来代替隔离作用域，以及使用$modal服务来创建模态框。

为了解决这个问题，可以在指令的HTML代码中添加ng-click="close"，并在链接函数中定义scope.close函数。这样每个指令实例都有自己的close函数，但仍然调用属于每个实例的唯一dismiss函数。

这段内容也提到了一些其他的替代方法，如使用scope: true代替scope: {}，以及使用scope.dismiss来代替scope.$parent.$parent.$parent.dismiss。

在这个问题的解决过程中，还提到了一些其他的问题和建议，如避免使用$$phase，使用scope.$apply来代替scope.$parent.$parent.$parent.$apply，以及使用$rootScope.$digest来代替scope.$apply。

，这个问题的原因是指令中$parent.$parent.$parent指向的是同一个祖父级元素，解决方法包括避免使用$parent，使用继承作用域，以及使用$modal服务来创建模态框。同时还提到了一些其他的问题和建议，如避免使用$$phase，使用scope.$apply和$rootScope.$digest来更新作用域。

0