Question

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

Answer 1

这里有太多的东西可以完全解释每一个，所以我会尝试简要解释每个以及一个例子。

控制器

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

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

指令是DOM元素上的标记（例如告诉AngularJS的属性，元素名称，注释或CSS类 HTML编译器（$ compile）将指定的行为附加到该DOM 元素（例如通过事件监听器），甚至转换DOM 元素及其子女。

主要观点是，指令允许您将某些逻辑/行为附加到某个元素，而控制器通常只允许您将逻辑附加到页面/视图。< / p>

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

<强> 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个不同的视图，其中包含用户列表：＆＃34;所有用户＆＃34;，＆＃34;我的好友＆＃34;和＃34;推荐用户＆＃34;，所有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个作用域中数据之间不必要的冲突并促进可重用性。但与此同时，我们希望控制器与指令共享一些数据，因此我们可以找到一个漏洞＆＃34;通过隔离范围允许某些内容，在我们的例子中是指令范围中定义的userData。

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

Answer 2

控制器是一个js函数，如果你在html中使用ng-controller='MyController'，它将被执行。

可以根据您的网址自动调用角度路由。

指令是可以应用代码的自定义HTML元素。指令可以容器html template，要么link function要执行，要么两者兼而有之。

指令示例：ng-repeat，ng-model，ng-include。

Answer 3

控制器通常用于包含和维护视图的逻辑，该逻辑通过$ scope绑定到您的视图。

指令可以重复使用，并在您的视图中直接通过指令名称调用，您可以将其作为属性传入。

示例：ng-if，ng-repeat，都是指令。

您可以为代码中重复使用的某些代码或逻辑制作自己的自定义指令。

良好的使用和指示指令是： http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/

干杯！

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

3 个答案:

控制器

指令