Question

我需要后退一步，了解控制器与指令之间的数据流，指令与控制器之间的数据流以及指令中的内联模板与模板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"）。所以我希望inline或url模板显示指令中的值，并保留控制器中未更改的值。

索引

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

customDirective

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

Answer 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操作。这是为了防止很难检测到进入您的应用程序的错误。

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

有关详细信息，请参阅AngularJS Error Reference - $rootScope:inprog

Answer 2

当你使用templateUrl时，为什么没有obj.prop，name.firstname从指令改变但是索引页面中的值从指令改变了？

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

答案：因为您没有提及范围originalBill：＆＃39; =＆＃39;在指令。
为什么我不能从范围中检索applyTest值？

回答：您必须更正名称为apply-test =＆＃34; applyTest＆＃34;而不是applyTest =＆＃34; applyTest＆＃34;

您可以查看工作代码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>

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

2 个答案: