Javascript 如何使用'&';在Angularjs中绑定指令时是否正确?
我在理解绑定范围属性中的Javascript 如何使用'&';在Angularjs中绑定指令时是否正确?,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我在理解绑定范围属性中的&选项时遇到问题。我已经阅读了这些教程:,并查看了文档,但对于如何使用&符号,我完全感到困惑 以下是我使用它的尝试: var app = angular.module('directivesApp'); app.directive('simplyIsolated', function () { return{ restrict: 'EA', replace: true, scope:{ att
&
选项时遇到问题。我已经阅读了这些教程:,并查看了文档,但对于如何使用&
符号,我完全感到困惑
以下是我使用它的尝试:
var app = angular.module('directivesApp');
app.directive('simplyIsolated', function () {
return{
restrict: 'EA',
replace: true,
scope:{
attnum: '@numone'
,bindnum: '=numtwo'
,expressnum: '&sq'
},
link: function (scope, elem, attr){
scope.x = scope.expressnum();
},
template:'<div><p> using "@" = {{attnum+attnum}}</p>'+
'<p>using "=" {{bindnum+bindnum}}</p>'+
'<p>using "&" {{x}}</p><br/><p>{{y}}</p>'+
'</div>'
};
})
.controller('MainCtrl', function ($scope) {
$scope.sqr = function(num){
return num*num;
}
});
var-app=angular.module('directivesApp');
app.directive('simpleIsolated',function(){
返回{
限制:“EA”,
替换:正确,
范围:{
attnum:“@numone”
,bindnum:'=numtwo'
,expressnum:“&sq”
},
链接:功能(范围、要素、属性){
scope.x=scope.expressnum();
},
模板:“使用“@”={{attnum+attnum}”+
“使用“=”{{bindnum+bindnum}”+
“使用“&”{{x}
{{y}”+
''
};
})
.controller('MainCtrl',函数($scope){
$scope.sqr=函数(num){
返回num*num;
}
});
这是我的html
<div class="container" ng-controller="MainCtrl">
<input type="text" ng-model="num1parent" />
<input type="number" ng-model="num2parent" />
<input type="number" ng-model="num3parent" />
<p>Parent Scope @ {{usernameparent}},
= {{userageparent}},
& = {{sqr(num3parent)}}
</p>
<div simply-isolated numone='{{num1parent}}' numtwo='num2parent' sq="sqr"></div>
</div>
父作用域@{{usernameparent}},
={{userageparent}},
&={{sqr(num3parent)}
这就是结果。
前两个输入用于显示@
和=
之间的差异。第三个输入用于显示sqr()
方法有效,但在下面的文本中,使用“&”
应该是第二个输入的平方,但我没有得到任何结果或错误
如果有人能给我指出正确的方向,我会非常感激
另外:为什么要在
作用域上使用&
。$parent
?仅仅是因为您没有将函数scope.x用作函数,而是将其作为没有参数值的函数表达式进行计算
尝试将模板更改为:
template:'<div><p> using "@" = {{attnum+attnum}}</p>'+
'<p>using "=" {{bindnum+bindnum}}</p>'+
'<p>using "&" {{x(bindnum}}</p><br/><p>{{y}}</p>'+
'</div>'
那就行了。
注:
这是有原因的,通常通过“&”属性符号传递的函数是函数回调,例如事件。因此,如果您的ExpressNum()
是事件的回调函数,那么在您的模板中可能会这样使用它
<a ng-click="expressnum()">Click Expression</a>
单击表达式
此外,函数
sqr()
是一种更改表达式结果的函数类型,此类函数必须定义为过滤器 为什么我不能使用“&”{expressnum(bindnum}}“,我确实需要将其分配给另一个作用域属性才能使用它。这是因为在属性表示法“&”中传递的引用从技术上讲是一个返回属性值中指定的回调函数的函数。要将其作为控制器中定义的函数调用,则必须执行以下操作:{{expressnum()(bindnum}}
<a ng-click="expressnum()">Click Expression</a>