了解角度控制器Vs指令

我对angularjs相当陌生。我试图理解为什么使用这个指令比使用控制器更好。这两个示例都输出相同的值。了解角度控制器Vs指令

指令实施例：

angular.module('docsSimpleDirective', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.customer = { 
    name: 'Naomi', 
    address: '1600 Amphitheatre' 
    }; 
}]) 
.directive('myCustomer', function() { 
    return { 
    template: 'Name: {{customer.name}} Address: {{customer.address}}' 
    }; 
});

标记：

<div ng-controller="Controller"> 
    <div my-customer></div> 
</div>

控制器示例：

angular.module('docsSimpleDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
     $scope.customer = { 
     name: 'Naomi', 
     address: '1600 Amphitheatre' 
     }; 
    }])

标记：

<div ng-controller="Controller"> 
    Name: {{customer.name}} Address: {{customer.address}}  
</div>

也许我只是不完全理解指令。你需要

来源

2015-08-17 Josh

http://stackoverflow.com/questions/18757679/angularjs-directives-vs-controllers – scarto

在工作中，我们用一个简单的练习，看看我们是否需要一个指令或没有。如果某个代码片段不止一次被使用，我们将它变成一个指令。

指令还提供了一个机会来减少混乱模板。

angular.module('DocsSimpleDirective', []) 
    .controller('DocsController', [function() { 
     this.customer = { 
      name: 'Naomi', 
      address: '1600 Amphitheatre' 
     }; 
    }]) 
    .directive('myCustomer', function() { 
     return { 
      scope: true 
      restrict: 'EA', 
      controller: 'DocsController', 
      controllerAs: 'docsCtrls', 
      templateUrl: 'assets/template/my-customer.directive.html' 
     }; 
    }) 
;

将使您的模板被定义为：

<article> 
    <strong>{{ docsCtrls.customer.name }}</strong><br> 
    {{ docsCtrls.customer.address }} 
</article>

就个人而言，我尝试使用$scope将数据绑定到切莫：作为

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular test</title> 
</head> 
<body ng-app="DocsSimpleDirective"> 
    <my-customer></my-customer> 
</body> 
</html>

和你的指令。如果别人开始阅读你的代码，那么在示波器某处的某个控制器中定义的神奇customer比在特定控制器上的变量难以识别。

隔离您的$范围可能很有用（通过定义scope: true）以使用默认值。如果你需要停止隔离你的指令，它应该是你想到的，而不是因为它是默认值。
如果不隔离范围，它将继承$parentScope中定义的所有值，这在嵌套指令时非常有用，其中所有指令都应知道它们来自哪个父指令。这有一个非常明显的危险，你可以操作不应该被操纵的父视图中的数据。

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

来源

2015-08-17 13:58:23 Pjetr

那么创建一个指令，比如''是个好主意吗？因为我将在项目的每个页面上使用它。或者我应该只是在根文件中硬编码？ – Josh

使用https://github.com/angular-ui/ui-router/wiki ui-router将是一个更好的主意。或者当您只需要更改单个视图时，甚至可以使用内置的ng路由：https：//docs.angularjs.org/api/ngRoute – Pjetr

其他的事情来设置scope:true

.directive('myCustomer', function() { 
    return { 
    scope:true, 
    template: 'Name: {{customer.name}} Address: {{customer.address}}' 
    }; 
});

REFER THIS DOC

来源

2015-08-17 13:41:58

它不真正解释他何时必须使用控制器以及何时需要使用指令。 –

@ Pierre-AlexandreMoller--那为什么我附上的文件请参考 –

有些说明总是比较好避免链接唯一的答案。如果文档的主要部分与问题无关，则为Specialy。 –

有是如何绑定功能模板多种可能的方式，有些是比别人做得更好。

BAD - 直接使用ng-controller属性在html模板绑定控制器功能，把它
BETTER - 使用ngRoute或ui-router指定路线/州或您的应用程序，在那里，你可以指定controller和template每个路线/状态
BEST - 使用directive定义对象，您可以再次指定controller和template将它们绑定在一起，然后在模板和路由中使用指令。

第三个例子是不是灵活，这样一种方式，你可以像<div my-directive></div>任何其他模板，而且在任何路由器作为像联模板使用指令：template: '<div my-directive></div>'

第三种方法是最好的因为它正朝着未来的组件方向发展（因为React，Angular 2.0和Webcomponents）。我写了一个blog post，并创建了一个示例github repository ilustrating这些概念。

来源

2015-08-17 14:16:52 tomastrajan

控制器：

控制器被用于扩充角范围。

当控制器经由ng-controller指令附加到DOM，角将实例化一个新Controller对象，使用指定的控制器的构造函数。

控制器使用于：

搭建$范围对象的初始状态。
将行为添加到$ scope对象。

不要使用控制器：

操作DOM - 控制器应该只包含业务逻辑。
格式输入 - 使用角度控件代替。
过滤器输出 - 使用角度过滤器代替。跨控制器
分享代码或状态 - 使用的角度，而不是服务。

指令：

在高层次上，指令是告诉AngularJS的HTML编译器（$编译）DOM元素上的标记（如属性，元素名称，注释或CSS类）将指定的行为附加到该DOM元素或甚至转换DOM元素及其子元素。

Angular带有一组内置的指令，如ngBind，ngModel和ngClass。

您可以为Angular创建自己的指令。

一般指令用于：

注入或封装现有的东西。
重用不同。安迪同样的事情
可以在DOM元素属性，元素，注释或类

所以如果你需要重复使用在不同的地点相同的DOM或逻辑，那么你应该使用指令注入而不是控制器。

您也可以从内部指令访问父控制器对象

像：

<div data-ng-controller="mainController"> 
    <p>hello world</p> 
    <some-directive></some-directive> // inject directive as element 
</div>

来源

2015-08-17 14:26:28

了解角度控制器Vs指令

回答

相关问题