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