Angular指令限制E中断代码

时间:2013-09-25 13:55:36

标签: javascript angularjs angularjs-directive

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

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

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

2 个答案:

答案 0 :(得分:2)

事实上,在工厂管理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

答案 1 :(得分:1)

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