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

或者更好的问题是，应该一个指令包含一个控制器？角度指令是否可以包含控制器？

由于分离的原因，我的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

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

回答

相关问题