javascript - 当 AngularJS 中的 Controller 可以完成同样的事情时，为什么要使用自定义指令？

Question

我正在学习代码学校的教程，在指令教程中，他们给出了非常简单的自定义指令示例，例如 1. 元素指令和 2. 属性指令。所以我的问题是我们可以通过 Controller 来实现需求，那么在哪种情况下我们需要自定义指令。

示例元素指令

index.html

  <product-title> </product-title>

自定义指令

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

产品标题.html

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

在 Controller 中也可以做同样的事情

index.html

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

Answer 1

简单。 关注点分离。

Controller 在架构上并不意味着 HTML 操作。它们用于控制数据，即显示在 View 上的内容。

虽然您认为将该代码包含在 Controller 中很简单(实际上确实如此)，但假设明天早上需求的变化迫使您更改 HTML。接下来是大量的搜索和替换事件。

指令概括了您的 HTML，它们定义了一个单独的层，您可以在其中定义自定义标签和属性，从而简化您正在呈现的 View 。将所有内容都塞进 Controller 中，会慢慢使整个代码库变得丑陋，从而导致代码管理困难。

顺便说一句，我想您很快就会发现这样一个事实:当我可以使用 Controller 实现类似的事情时，为什么我应该使用服务/工厂。 ??您可以查看this回答更多详情