Angular：关于将范围数据传递给指令

Question

我对Angular很新，还在学习。我发布了一个关于如何将范围数据传递给指令的问题。两个好人回答了我的问题，但解释很短，所以我不理解其中两个答案中的一些代码。我会在这里发布这两个答案和附带的代码，如果可能的话，有人能够回答我的问题。

第一组代码

<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>

myApp.directive('myDirective', function(){
  return {
    scope: { price: '=' },
    require: 'ngModel',
    link : function(scope){
      console.log(scope.price)
    },
    controller: function(scope, element, attrs, ngModel){
      console.log(ngModel.price);
      console.log(scope.price);
    }
  }
});

第1点

为什么范围在指令中声明？关于孤立范围＆＃39; 属性名称必须是价格，这里有变量名称的原因吗？我们可以给它一个不同的名字吗？

第2点

我是ng的新手。这是我第一次注意到在指令＆＃39;中声明的＆＃39; 控制器。何时以及为什么人们在指令中声明控制器？大多数情况下，我们在指令之外声明一个控制器。控制器功能和指令内的控制器是相同还是不同？

第3点

require: 'ngModel', ?的含义是什么？如果我们不写require: `ngModel什么将无效？

第二组代码

angular.module('myApp')
.directive('myDirective', function () {
    return {
        transclude: true,
        restrict: 'AEC',
        scope: {
            name: '=',
            price: '='
        },
        templateUrl: 'my-directive.html',
        link: function (scope, element, attr) {
            }
        }
    }
});

<li my-directive ng-repeat="item in products" price="item.price" name = "item.name"></li>

分1

什么是transclude: true ? transclude = true or false?的含义在什么样的情况下人们使用transclude: true or false?

分2

我必须将文件my-directive.html 放在文件夹中，该文件的位置是什么？

Angular会自动加载此模板文件 吗？

Answer 1

第1集

第1点：为什么在指令中声明范围？隔离范围属性名称必须是价格？我们可以在这里给出不同的名字吗？

Ans：范围在指令中声明，以便指令的每个实例都有自己的范围彼此独立。不，它不必是价格，它可以是任何变量名称根据您的选择。通常的做法是在指令的使用上下文中使用变量名。

第2点： 我是新来的。这是我第一次注意到指令中声明的控制器。为什么以及何时人们在指令中声明控制器？主要是我们声明指令的控制器一侧。指令中的控制器功能和控制器是相同还是不同？

Ans：此控制器是指令的控制器，与您通常在模块中看到的不同。

第3点： require的含义是什么：'ngModel',?如果我们不写需要：`ngModel然后什么不起作用？

Ans：使用您的指令时，强制它与属性/控制器ng-model一起使用。您可以参考this answer了解更多详情。

第二组

Point1：什么是transclude：true？ transclude = true或false是什么意思？在什么样的情况下人们使用transclude：true或false？

Ans：它将transclude设置为true。根据文件：

  

指示使用包含转义的最近父指令的转换DOM的插入点的指令。

transclude：true允许我们使用我们的模板包装用户模板。我在我写的指令中使用它是真的，如果表是空的，我会显示一条错误消息，显示无可用数据。在我的情况下，表格根本不会显示，而是显示该指令的模板。

要点2： 我必须将文件my-directive.html放在文件夹中。该文件的位置是什么？ angular会自动加载这个模板文件吗？

Ans：您可以将此模板放在项目文件夹中的任何位置。例如，在名为views或templates的文件夹中。只要您在templateUrl中提供正确的路径，angular就会找到该文件并在指令中使用它。