Question

我正在从代码学校学习教程，在指令教程中，他们给出了非常简单的自定义指令示例，如1. Element Directive和2. Attribute指令。所以我的问题是我们可以通过控制器来实现这个要求，然后我们将需要自定义指令。

示例元素指令

index.html

  <product-title> </product-title>

自定义指令

app.directive('productTitle', function(){
     return {
        restrict: 'E', // E  for HTML Element
        templateUrl: 'product-title.html'
     };
   });

product-title.html

<h3>
{{product.name}}
<em class="pull-right">   ${{product,price}}</em>
</h3>

在控制器中可以做同样的事情

的index.html

<div ng-controller="ctrl"> 
   <h3> {{product.name}} </h3>
</div>
app.controller('ctrl', function(){
    scope.product.name='HP';
})

Answer 1

简单。 关注点分离。

控制器在架构上并不适用于HTML操作。它们用于控制数据，视图上显示的内容。

虽然您认为将该代码包含在控制器中很简单，实际上，假设明天早上需求的更改会强制您更改HTML。接下来是重要的搜索和替换活动。

指令概括了您的HTML，它们定义了一个单独的图层，您可以在其中定义自定义标记和属性，以简化您要渲染的视图。填充控制器中的所有内容会慢慢使整个代码库变得丑陋，导致代码管理困难。

顺便说一句，我想你很快就会发现，为什么我可以使用服务/工厂，当我可以使用控制器实现类似的事情。 ??您可以查看this答案了解更多详情

Answer 2

当你看到一段可以重用的代码时，你应该总是创建一个指令。例如，一个DatePicker将在一个指令中创建..因为它会在多个地方有用..

但即使它很简单，所有的逻辑都会在同一个地方，你可以随时轻松改变它（只有一次）。此外，一旦你将它分成更多的部分，你的源代码将变得更具可读性。

Answer 3

在这种情况下，自定义指令主要用于可读性目的。 Custom指令允许您将一大块HTML包装到具有特定用途的不同文件中。例如，您可以在网页上设置一个设置向导。然后，每个自定义指令都可以代表设置向导的单独步骤。而不是包含所有步骤的长HTML文档。

为什么在angularjs中控制器可以使用custome指令？

3 个答案: