角度指令是否可以包含控制器？

或者更好的問題是，應該一個指令包含一個控制器？角度指令是否可以包含控制器？

由於分離的原因，我的index.html是一個簡單的文件。一切都通過模板呈現給它。所以，我的index.html是真實簡單：

<body ng-app="myapp"><mainmenu></mainmenu><div ng-view></div></body>

我並不真的需要一個mainmenu指令，但它可以讓我把菜單在一個單獨的模板文件。主菜單本身包含用戶信息，登錄/註銷和搜索框。

<div class="leftmenu" ng-show="isLogin()"> 
    <ul class="menu"> 
     <li><a href="/part1">Part1</a></li> 
     <li><a href="/part2">Part2</a></li> 
     <li><a href="/part3">Part3</a></li> 
    </ul> 

    <div ng-controller="Search" class="Search><input type="text" ui-select2="s2opts" style="width:250px;" ng-model="search" data-placeholder="search"></input></div> 
</div> 

<div class="rightmenu"> 
    <ul ng-show="isLogin()" class="menu"> 
     <li><a href="/account">My Account</a></li> 
     <li><a href="/logout" ng-click="logout()">Logout</a></li> 
    </ul> 
    <ul ng-show="!isLogin()" class="menu"> 
     <li><a href="/login">Login</a></li> 
     <li><a href="/register">Register</a></li> 
    </ul> 
</div>

因此，菜單部分有自己的控制器，並且在兩部分之間嵌入了自己的搜索。

當然，我的mainmenu指令單元測試失敗，因爲SearchController未定義。但是這讓我想知道我是否正在討論這個錯誤。我是否應該像這樣，在其中定義了一個明確的ng-controller的html部分？這不會造成各種奇怪的依賴嗎？

我應該如何更好地構造這個？包含一個search指令，以便我可以單獨對它進行單元測試？什麼感覺錯了這裏...結構

UPDATE：

按照要求，一個基本的小提琴：http://jsfiddle.net/nj4n44zx/1/

來源

2014-10-03 deitch

如果可以，我會在這裏添加一個有偏見的評論。如果你正在談論渲染模板視圖等，我會去'angular.ui.router'。令人敬畏的路由功能，真棒狀態控制。它使測試更容易。否則，對我來說，指令是可重用的。但是，儘管如此，你仍然選擇了設計。 – CozyAzure 2014-10-03 08:12:47

偏向好;至少這是我可以同意或不同意的。無偏見是無聊的。 :-)所以，你可能是對的，我會再看看angular.ui.router（因爲我使用了很多angular.ui）。但是，我想以任何方式解決核心架構問題。 – deitch 2014-10-03 08:14:41

正如角文件中指定的指令，最好的做法是定義一個指令內部控制器只露出一個API，另一指示。否則，鏈接功能就足夠了。

看到的底部：

Angular directives

通過使用經驗控制器一個指令內陰影你在你的範圍正在做什麼。它沒有幫助有一個易於閱讀的代碼。

我更喜歡使用包含指令的主控制器。使用非隔離範圍，您可以訪問鏈接功能中的所有內容。

來源

2014-10-03 08:26:51 benek

你在說什麼是有道理的。你會如何重構上述，讓它更有意義？這就是我正在努力的？ – deitch 2014-10-03 08:28:28

取決於你在你的搜索控制器中做什麼......我想要在身體層面上定義一個控制器，在該指令的上面。在其他地方有一個地方可以執行指令可以訪問的邏輯。同樣重要的是：有關搜索的邏輯可以包含在服務中。指令不是唯一重用的地方。 JSFiddle它，我們將能夠給出一個完整的實現。 – benek 2014-10-03 08:40:17

我會搗鼓它，謝謝。來... – deitch 2014-10-03 08:41:21

我通常用它對付這樣的：

app.directive('topMenu', function() { 
    return { 
     restrict: 'E', // or whatever You need 
     templateUrl: '/partials/topmenu', //url to Your template file 
     controller: function($scope) { 
      $scope.foo = "bar"; 
     } 
    }; 
});

然後，在模板你不必添加ng控制器。

來源

2014-10-03 08:16:01 Jarema

我想我不是很清楚。有菜單部分，然後是搜索，它本身是一個單獨的元素與自己的控制器。我編輯了這篇文章。 – deitch 2014-10-03 08:18:03

確保您的指令可以包含一個控制器，因爲你聲明這樣

myApp.directive('mainMenu', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'menu.html', 
     controller:['$scope', function($scope) { 
      //define your controller here 
     }] 
    }; 
});

來源

2014-10-03 08:16:58

我想我不是很清楚。有菜單部分，然後是搜索，它本身是一個單獨的元素與自己的控制器。我編輯了這篇文章。 – deitch 2014-10-03 08:20:16

角度指令是否可以包含控制器？

回答

相關問題