Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 这个指令范围有什么问题?_Angularjs_Angularjs Directive_Angularjs Scope - Fatal编程技术网

Angularjs 这个指令范围有什么问题?

Angularjs 这个指令范围有什么问题?,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我正在从一本书中学习AngularJS,其中一个例子给了我一个范围指令。我决定玩一些,我遇到了一些不适合我的东西。4个范围值中有3个可以使用,但有1个不能使用。当我使用player:'=dataPlayer'时,屏幕上的值不会被渲染,对于其余的部分,这可以正常工作。我的假设是数据-保留为角度,但我在任何地方都找不到。有人知道为什么会这样吗 <!--Html--> <div ng-repeat="currentPlayer in players"> <

我正在从一本书中学习AngularJS,其中一个例子给了我一个范围指令。我决定玩一些,我遇到了一些不适合我的东西。4个范围值中有3个可以使用,但有1个不能使用。当我使用
player:'=dataPlayer'
时,屏幕上的值不会被渲染,对于其余的部分,这可以正常工作。我的假设是
数据-
保留为角度,但我在任何地方都找不到。有人知道为什么会这样吗

  <!--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)
      }
    };
  });

//角码
指令('myPlayer',函数(){
返回{
限制:“AEC”,
templateUrl:'playerTest.html',//只是一些简单的html来显示播放器数据
范围:{
//玩家:'=currentPlayerTest'//有效
//玩家:'=playerData'//有效
播放器:'=dataPlayer'//不工作
//播放器:'=data'//WORKS(来自书本的示例)
//播放器:'='//有效(根据PSL的答案示例)
}
};
});

您不需要在双向作用域绑定中为
数据添加前缀,它是通过剥离
数据隐式解析的。您只需要
player:'='
,因为您的属性名和隔离作用域上的双向绑定属性名是相同的

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

Angular规范化元素的标记和属性名称,以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的规范化名称(例如ngModel)引用指令。但是,由于HTML不区分大小写,我们在DOM中以小写形式引用指令,通常在DOM元素(例如ng模型)上使用破折号分隔的属性

规范化过程如下所示:

从元素/属性前面剥离x-和数据。 将:、-、或_分隔的名称转换为camelCase。