angularjs – 角度js中控制器和指令之间的区别是什么？

这里有一点太多,无法完全解释每一个,所以我将尝试简要解释每个以及一个例子.

控制器

使用控制器处理视图的逻辑并分配要在视图中显示的数据.例如,如果在您的应用程序中有一个名为“所有用户”的页面,您希望显示一个用户列表,定义一组用户并将其附加到控制器中的$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}
  ];
}]);

将users数组附加到作用域允许您从视图中访问此数据.所以现在在视图中你可以使用ng-repeat来输出用户列表：

<ul>
 <li ng-repeat="user in users">{{user.name}}</li>
<ul>

指令

指令主要用于两件事：

>创建可重用的组件
>操纵DOM

指令起初很难使用但功能非常强大,这些来自文档的声明是它们如此强大的原因：

Directives are markers on a DOM element (such as an
attribute,element name,comment or CSS class) that tell AngularJS’s
HTML compiler ($compile) to attach a specified behavior to that DOM
element (e.g. via event listeners),or even to transform the DOM
element and its children.

除此之外的主要观点是指令允许您将某些逻辑/行为附加到某个元素,而控制器通常只允许您将逻辑附加到页面/视图.

让我们说在前面的例子中我们想要添加一些可以在用户列表中完成的操作,可能是喜欢和不喜欢的按钮.我们可以像这样创建喜欢和不喜欢的按钮：

JS

var myApp = angular.module('myApp',id: 1,like: 0},id: 2,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)案例),这样做是为了避免2个范围内的数据之间发生不必要的冲突并促进重新使用.但与此同时,我们希望控制器与指令共享一些数据,因此我们通过隔离范围“挖洞”以允许某些内容,在我们的示例中是指令范围中定义的userData.

您可以访问directives docs并向下滚动以隔离范围以获取更多示例.