Question

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

Angular scope is shared for all modules and controllers

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

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

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时，它会调用你控制器中的点击功能

你的指示应该是：

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>

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

Answer 2

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

Angular指令限制E中断代码

2 个答案: