Question

或许更好的问题是，应该指令包含控制器吗？

出于分离的原因，我的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指令，以便我可以单独对其进行单元测试？结构上有些东西感觉不对......

更新：

根据要求，一个基本的小提琴：http://jsfiddle.net/nj4n44zx/1/

Answer 1

根据Angular文档的规定，最佳做法是在指令中定义控制器，仅将API暴露给另一个指令。否则链接功能就足够了。

见底部：

Angular directives

根据使用指令中的控制器的经验暗示你在范围内做了什么。拥有易读的代码是没有用的。

我更喜欢使用包含该指令的主控制器。使用非隔离范围，您可以访问链接功能中的所有内容。

Answer 2

我通常会这样处理：

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-controller。

Answer 3

确保您的指令可以包含控制器，因为您声明了这样的指令

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

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

3 个答案: