我可以在指令中使用模塊級控制器嗎？

我仍然試圖找出控制器，模塊，服務等在Angular JS中的角色，所以請隨身攜帶。我可以在指令中使用模塊級控制器嗎？

我想要在我的指令裏面有一個控制器。我想引用控制器是同一模塊的指令的一部分，所以我會認爲這會「只是工作」：

的index.html：

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="angular.min.js" type="text/javascript"></script> 
    <script src="test.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <direct> 
     ABC 
    </direct> 
    </body> 
</html>

test.js ：

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope) { 
    $scope.data = "Hello World!"; 
}); 

myApp.directive('direct', function() { 
    function link(scope, element, attrs, ctrl) { 
     element.on("mouseenter", function() { 
      alert(ctrl.data); 
     }); 
    }; 

    return { 
     restrict: 'E', 
     link: link, 
     require: 'MyCtrl', 
     template: '<div>Alert!</div>' 
    } 
});

正如你所看到的，我只是想從「MyCtrl」引用一些數據，當您將鼠標放在該指令。

然而，在頁面加載我得到的error：

Error: $compile:ctreq 
Missing Required Controller 
Controller 'MyCtrl', required by directive 'direct', can't be found!

所以角找不到「MyCtrl」控制。自從我們處於Angular會在這個控制器上選擇的「myApp」模塊的範圍之內，我就假設我已經假設了，但顯然不是？

在這個簡化的例子中，它可能看起來像我想使用控制器：「MyCtrl」，但事實並非如此。我希望能夠訪問「MyCtrl」中的數據，而不需要它作爲該指令的控制器（從語義上講，「MyCtrl」是該指令的控制器是沒有意義的）。

是否還有其他一些要求讓我失去工作？

來源

2014-03-06 William

基於文檔;我認爲需求應該是指另一個指令，並且這兩個指令需要相互結合使用。 http://docs.angularjs.org/guide/directive。我會補充一點，它聽起來像是在試圖爲指令添加一個外部依賴項;這往往破壞了封裝的目的。 – JeffryHouser

@ Reboog711啊，所以這隻適用於你想要服務？我將詳細說明我的意圖 - 我試圖讓它能夠在控制器之間傳遞數據，而我並不打算封裝。例如，如果我有一個菜單對象，並且用戶將一個項目添加到他們的順序中，我希望能夠說「用戶將菜單項添加到他們的順序」（一個粗略的例子，但你明白了）。經過深入研究，我發現我想要的是服務。 – William

在控制器之間共享數據應使用服務或工廠;所以我認爲你在正確的軌道上。 – JeffryHouser

是的，這是可能的。

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope) { 
    this.data = "Hello World!"; 
}); 

myApp.directive('direct', function() { 
    function link(scope, element, attrs, ctrl) { 
     element.on("mouseenter", function() { 
      alert(ctrl.data); 
     }); 
    }; 

    return { 
     restrict: 'E', 
     link: link, 
     controller: 'MyCtrl', 
     template: '<div>Alert!</div>' 
    } 
});

這是CSSDeck，演示此代碼。

所有這些都說了，這讓我覺得它是一個指令控制器的不尋常用例。我懷疑這只是臨時代碼來演示這個概念，但是如果您需要將父指令的行爲或屬性暴露給子指令，通常您只會使用指令控制器。

最後，值得注意的是，避免引入像您在這裏完成的全局變量var myApp是最佳做法。只需使用方法鏈接。

來源

2014-07-15 23:24:32

這實際上是爲控制器創建另一個實例，您在該控制器上修改的變量不會影響另一個實例。 http://jsfiddle.net/amatiasq/2dq9w4r2/ –

我可以在指令中使用模塊級控制器嗎？

回答

相關問題