这个指令范围有什么问题？

Question

我正在通过一本书学习 AngularJS，其中一个示例为我提供了一个具有范围的指令。我决定尝试一下，但我运行陷入了对我不起作用的事情。 4 个范围值中有 3 个可以使用，但 1 个不能。当我使用 player: '=dataPlayer' 时，屏幕上的值不会被渲染，其余的工作正常。我的假设是 data- 保留在 Angular 中，但我无法在任何地方找到它。有谁知道为什么会这样？

  <!--Html-->
  <div ng-repeat="currentPlayer in players">
    <!-- <my-player current-player-test="currentPlayer"/> -->
    <!-- <my-player player-data="currentPlayer"/> -->
    <my-player data-player="currentPlayer"/>
    <!-- <my-player data="currentPlayer"/> -->
    <!-- <my-player player="currentPlayer"/> -->
  </div>

  //Angular code
  myAppModule.directive('myPlayer', function() {
    return {
      restrict: 'AEC',
      templateUrl: 'playerTest.html', //Just some simple html to display player data
      scope: {
        //player: '=currentPlayerTest'  //WORKS
        //player: '=playerData'         //WORKS
        player: '=dataPlayer'           //DOES NOT WORK
        //player: '=data'               //WORKS (example from book)
        //player: '='                   //WORKS (example per PSL's answer)
      }
    };
  });

Answer 1

您不需要在 2 方式范围绑定中添加前缀 data 它通过剥离 data- 隐式解析。您只需要 player: '=' 因为您的属性名称和隔离范围上的 2 路绑定属性名称相同。

 myAppModule.directive('myPlayer', function() {
    return {
      restrict: 'AEC',
      templateUrl: 'playerTest.html', //Just some simple html to display player data
      scope: {
         player: '='
      }
    };
  });

来自documentation：

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

这个指令范围有什么问题？

What is wrong with this directive scope?

angularjs

angularjs-directive

angularjs-scope