角度js中控制器和指令之间有什么区别？

Question

我是角js的初学者.我正在努力理解角度js中控制器和指令之间的确切区别.

Answer 1

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

控制器

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

指令

指令主要用于两件事:

1. 创建可重用的组件
2. 操纵DOM

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

指令是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包装成可重用的组件.

编辑: 关于我们如何将用户数据传递给指令,这与指令中的隔离范围有关,您可以在这里阅读.基本思想是它将指令的范围与父作用域隔离(在我们的例子中是allUsersController),这样做是为了避免2个作用域中数据之间不必要的冲突并促进可重用性.但与此同时,我们希望控制器与指令共享一些数据,因此我们通过隔离范围"挖出一个洞"以允许某些内容,在我们的例子中是userData在指令范围内定义的.

您可以访问指令文档并向下滚动以隔离范围以获取更多示例.