javascript - Angular 指令限制 E 中断代码

Question

这是对这个问题的跟进。我有相同的设置：

所有模块和控制器共享 Angular 范围

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

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

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"，单击功能不起作用，但是当我删除它时，它就起作用了。

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

Answer 1

事实上，在工厂管理 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 时，它将调用控制器中的 click 函数

你的指令应该是：

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

你喜欢这样的html：

<second-directive></second-directive>

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

Answer 2

当您提供restrict: "E"(element) 作为配置选项时，ng将需要一个自定义标记，例如：<second-directive></second-directive>用于应用此指令。当您删除它时，它默认为"A"(attribute)，这可能是您用作应用此指令的声明的内容。