角度指令限制 E 中断代码

Angular directive restrict E breaks code

本文关键字：中断 代码 指令      更新时间：2023-09-26

这是这个问题的后续。我有相同的设置：

所有模块和控制器共享角度示波器

所以根模块，控制器和指令。现在来问问题：

我有一个服务，里面写着这个：

firstModule.factory("firstService", function () {
   return {   
       $('.mainitems').click(function () {               
            alert("hi")
        });
   };
});

还有一个指令，它嵌套在其他指令中：

    secondModule.directive("secondDirective", function () {
    return {
        templateUrl: "./myurl",
        restrict: "E",
        replace: true,
        compile: function (tElement, tAttrs, controller) {
            return {
            }
        }
    }
});

当我有行：restrict: "E"时，单击功能不起作用，但是当我删除它时，它就可以工作了。

知道为什么这可能是问题吗？这是一件奇怪的事情，经过一天的调试，我发现了问题。

事实上，在工厂中管理 dom 操作是一个糟糕的模式！所有 DOM 操作都必须放在指令中，因此单击它ng-click

例如： 

<div ng-controller="MyController">
    <div ng-click="click()"></div>
</div>

其中 click（） 是你的作用域的一个函数。所以你有这样的控制器： 

secondModule.controller('MyController', function($scope){
    $scope.click = function(){
      //do what you want
    };
});

当你点击你的div时，它会在你的控制器中调用点击函数

您的指令应该是： 

secondModule.directive("secondDirective", function () {
return {
    template: "<div ng-click='click()'><a>Click here</a></div>",
    restrict: "E",
    replace: true,
    link: function (tElement, tAttrs, controller) {
    }
}
});

你喜欢这样： 

<second-directive></second-directive>

在这里工作 plunkr ： http://plnkr.co/edit/DmkQTp?p=preview

当您提供restrict: "E"（元素）作为配置选项时，ng需要这样的自定义标记： <second-directive></second-directive> 来应用此指令。删除它时，它默认为 "A"（属性），这可能是您用作应用此指令的声明。

相关文章：