我是 Angular js 的初学者。我正在努力理解 angular js 中控制器和指令之间的确切区别。
【问题讨论】：
标签： angularjs
这里的内容太多了，无法完全解释每一个，所以我将尝试对每一个进行简要解释并举例说明。
使用控制器来处理视图的逻辑并分配要在视图中显示的数据。例如，如果在您的应用程序中有一个名为“所有用户”的页面，您想显示一个用户列表，定义一个用户数组并将其附加到控制器中的$scope 对象。
var myApp = angular.module('myApp',[]);
myApp.controller('allUsersController', ['$scope', function($scope) {
$scope.users = [
{ name: "User 1", id: 1},
{ name: "User 2", id: 2},
{ name: "User 3", id: 3}
];
}]);
将用户数组附加到范围允许您从视图访问此数据。所以现在在视图中你可以使用ng-repeat 来输出用户列表：
<ul>
<li ng-repeat="user in users">{{user.name}}</li>
<ul>
指令主要用于两件事：
指令起初使用起来很棘手，但非常强大，文档中的这句话是它们如此强大的原因：
指令是 DOM 元素上的标记（例如 属性、元素名称、注释或 CSS 类）告诉 AngularJS 的 HTML 编译器 ($compile) 将指定的行为附加到该 DOM 元素（例如通过事件监听器），甚至转换 DOM 元素及其子元素。
要消除的要点是指令允许您将某些逻辑/行为附加到某个元素，而控制器通常只允许您将逻辑附加到页面/视图。
假设在前面的示例中，我们想要添加一些可以在用户列表中完成的操作，可能是一个喜欢和不喜欢的按钮。我们可以像这样创建喜欢和不喜欢的按钮：
JS
var myApp = angular.module('myApp',[]);
myApp.controller('allUsersController', ['$scope', function($scope) {
$scope.users = [
{ name: "User 1", id: 1, like: 0},
{ name: "User 2", id: 2, like: 0},
{ name: "User 3", id: 3, like: 0}
];
$scope.like = function(user){
user.like++;
}
$scope.dislike = function(user){
user.like--;
}
}]);
HTML
<ul>
<li ng-repeat="user in users">
{{user.name}}
<button ng-click="like(user)">LIKE</button>
<button ng-click="dislike(user)">DISLIKE</button>
</li>
<ul>
相当简单，我们在控制器中添加喜欢/不喜欢方法来增加/减少用户的喜欢数量。这段代码可以正常工作，但是如果我想在不同的视图中创建另一个用户列表怎么办？假设您有 3 个不同的视图，其中包含用户列表：“所有用户”、“我的朋友”和“推荐用户”，所有 3 个都将有一个具有相同操作（喜欢或不喜欢）的用户列表，但显示的用户是在每个不同。我们想使用我们在allUsersController 中定义的相同的喜欢/不喜欢方法，但是我们在不同的视图上，所以我们无法访问它们，所以您必须将相同的代码复制到其他视图的控制器中，在我们的示例中可能看起来没什么大不了的，但随着应用程序变得越来越大和越来越复杂，这变得非常乏味且难以维护。
这是指令的用武之地，您可以在指令中定义它，而不是在控制器中分配每个用户项背后的逻辑：
app.directive('userItem', function() {
return {
template: '<div>{{userData.name}} <button ng-click="like()">Like</button> <button ng-click="dislike()">Dislike</button>',
scope: {
userData: "="
},
link: function(scope, element, attrs) {
scope.like = function(){
scope.userData.like++;
}
scope.dislike = function(){
scope.userData.like--;
}
}
}
});
在您的 html 中：
<div class="user_list>
<user-item ng-repeat="user in users" user-data="user"></user-item>
</div>
通过使用user-item 指令，您现在可以在应用程序的任何位置创建用户列表，而无需重新定义每个用户的逻辑。您会注意到，这也稍微清理了我们的 html，并为您节省了很多重复代码。该指令将您的 html 和 js 包装成一个可重用组件。
编辑：
关于我们如何将用户数据传递给指令，这与指令中的隔离范围有关，您可以阅读有关here 的信息。基本思想是将指令的范围与父范围（在我们的例子中为 allUsersController）隔离开来，这样做是为了避免两个范围内的数据之间发生不必要的冲突并促进可重用性。但同时我们希望控制器与指令共享一些数据，所以我们通过隔离范围“戳一个洞”以允许某些东西进入，在我们的例子中是指令中定义的userData范围。
您可以访问directives docs 并向下滚动以隔离范围以获取更多示例。
【讨论】：
控制器是一个js函数，如果你在html中使用ng-controller='MyController'就会被执行。
它可以根据您的 url 自动使用 angular-route 调用。
指令是可以应用代码的自定义 HTML 元素。一个指令可以包含一个html template，或者一个link function 来执行，或者两者都有。
指令示例：ng-repeat、ng-model、ng-include。
【讨论】：
控制器通常用于包含和维护视图的逻辑，它通过 $scope 绑定到您的视图。
指令是您可能会重复使用的东西，它会在您的视图中直接通过指令名称调用，您可以将其作为属性传入。
示例：ng-if 、ng-repeat 都是指令。
您可以为代码中重复使用的某些代码或逻辑创建自己的自定义指令。
使用和隐含指令的好读物是： http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/
干杯！
【讨论】：