AngularJS中指令和控制器之间的数据共享答案

【问题标题】：Data share between directive and controller in AngularJSAngularJS中指令和控制器之间的数据共享
【发布时间】：2017-03-17 03:14:41
【问题描述】：

我需要退后一步，了解控制器到指令、指令到控制器以及指令中的内联模板与模板 url 之间的数据流。

我使用内联模板和 templateUrl 创建了 customDirective，用于测试目的。我在控制器的作用域（obj.prop= "Germany", name.firstname= "Gotze", originalBill="$20"）中附加了几个值，并将更改指令中的值并再添加一个（obj.prop= "USA", name.firstname= "Tom", originalBill= not changed, bill="4000", applyTest="New Value"）。所以我希望内联或 url 模板显示指令中的值并保留控制器中未更改的值。

索引

<pass-object obj="obj" name="name" bill="bill" originalBill="originalBill" applyTest="applyTest"></pass-object>

自定义指令

app.directive('passObject', function() {
return {
    restrict: 'AE',
    scope: { 
      obj: '=',
      name:'=',
      bill:'=',
      applyTest:'='
    },
   templateUrl:'./customDirective.html',
  /* template: `<div style="color:brown">
              =====Directive Inline Template===== <br/>
              Country Name : {{obj.prop}}! <br/>
              Person Name: {{name.firstname}} <br/>
              Original money : {{originalBill}} <br/>
              Bill Money: {{bill}} <br/>
              Testing Apply: {{applyTest}} <br/>
              Two Way Binding: <input type="text" ng-model="obj.prop" ng-model="name.firstname"/>
              </div>`,
    */
    link: function(scope, element, attrs){
      scope.name = { firstname: "Tom" };
      scope.obj = { prop: "USA" };
      scope.bill="$4000";

      scope.$apply(function() {
        scope.applyTest= " New Value";
      });
    }
};
});

问题/困惑（检查 plunker）：
1.使用templateUrl时，为什么obj.prop,name.firstname没有从指令改变，而索引页的值从指令改变？
2.当您在索引和内联html中使用内联模板时，会反映来自obj.prop、name.firstname的指令的正确值；但是originalBill 没有得到价值？
3. 为什么我不能从作用域中检索到applyTest 值？

Plunker

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-controller

【解决方案1】：

属性名称必须是kebab-case，而不是camelCase：

<!-- ERRONEOUS
<pass-object obj="obj" name="name" bill="bill" 
             originalBill="originalBill" applyTest="applyTest">
</pass-object>
-->

<!-- CORRECT -->
<pass-object obj="obj" name="name" bill="bill" 
             original-bill="originalBill" apply-test="applyTest">
</pass-object>

欲了解更多信息，请参阅AngularJS Developer Guide - Directive Normalization

也不要在链接函数中使用$apply：

link: function(scope, element, attrs){
  scope.name = { firstname: "Tom" };
  scope.obj = { prop: "USA" };
  scope.bill="$4000";

  //DONT use $apply here
  //scope.$apply(function() {
    scope.applyTest= "New Value";
  //});
}

在任何时间点都只能有一个$digest 或$apply 操作正在进行。这是为了防止很难检测到的错误进入您的应用程序。

这个错误可以在调试控制台中看到。

【讨论】：

【解决方案2】：

当你使用templateUrl时，为什么obj.prop,name.firstname没有从directive改变，但是index page中的值从directive改变了？

答案：因为您在html文件'customDirective.html'中使用了控制器'MainCtrl'作为
当您在索引和内联 html 中使用内联模板时，会反映来自 obj.prop、name.firstname 指令的正确值；但是 originalBill 没有得到值？

答案：因为你没有在指令中提到 scope originalBill:'='。
为什么我不能从作用域中检索 applyTest 值？

回答：您必须将名称更正为 apply-test="applyTest" 而不是 applyTest="applyTest"

您可以查看工作代码here。

customDirective.html

    <div>
      <h4 style="color:blue"> ** Custom Directive ** </h4>
      <table style="width:50%">
      <tr>
        <th>Country</th>
        <th>Person</th>
        <th>Money</th>
        <th>Original Money</th>
        <th>Testing Apply </th>
      </tr>
      <tr>
        <td>{{obj.prop}}</td>
        <td>{{name.firstname}}</td>
        <td>{{bill}}</td>
        <td>{{originalBill}}</td>
        <td>{{applyTest}} </td>
      </tr>
    </table>
    </div>

【讨论】：