angularjs - angular js中的 Controller 和指令有什么区别？

Question

我是 angular js 的初学者。我正在努力理解 angular js 中 Controller 和指令之间的确切区别。

Answer 1

这里发生的事情有点太多，无法完全解释每一个，所以我将尝试对每一个进行简要解释以及一个例子。

Controller

使用 Controller 来处理 View 的逻辑并分配要显示在 View 中的数据。例如，如果在您的应用程序中有一个名为“所有用户”的页面，您希望显示一个用户列表，定义一个用户数组并将其附加到 $scope Controller 中的对象。

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 数组附加到范围允许您从 View 访问此数据。所以现在在 View 中你可以使用 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.

主要的一点是，指令允许您将某些逻辑/行为附加到某个 元素 ，而 Controller 通常只允许您将逻辑附加到页面/ View 。

假设在前面的示例中，我们想添加一些可以在用户列表中完成的操作，可能是喜欢和不喜欢按钮。我们可以像这样创建喜欢和不喜欢的按钮:

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>

相当简单，我们在 Controller 中添加喜欢/不喜欢方法，增加/减少用户喜欢的数量。这段代码可以正常工作，但是如果我想在不同的 View 中创建另一个用户列表怎么办？假设您有 3 个不同的 View ，其中包含用户列表:“所有用户”、“我的 friend ”和“推荐用户”，所有 3 个 View 都将包含具有相同操作(喜欢或不喜欢)但显示的用户的列表各不相同。我们想使用我们在 allUsersController 中定义的相同的喜欢/不喜欢方法。但是我们在不同的 View 上，所以我们无法访问它们，因此您必须将相同的代码复制到其他 View 的 Controller 中，在我们的示例中可能看起来没什么大不了的，但是随着应用程序变得越来越大和越来越复杂这变得非常乏味且难以维护。

这是指令的用武之地，您可以在指令中定义它，而不是在 Controller 中分配每个用户项背后的逻辑:

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)隔离，这样做是为了避免两个作用域中的数据之间发生不必要的冲突并促进可重用性。但与此同时，我们希望 Controller 与指令共享一些数据，因此我们通过隔离范围“戳一个洞”以允许某些内容进入，在我们的例子中是 userData在指令范围内定义。

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