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: '='，因为隔离范围上的属性名称和双向绑定属性名称相同。

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

来自documentation：

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：

从元素/属性的前面剥离x-和data-。   将：， - 或_分隔的名称转换为camelCase。

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

1 个答案: