我有一个自定义指令,其中包含带有 Angular 对象的 DOM 元素,我想知道如何定位该对象的值。 例子如下:
app.directive('x', function() {
return {
scope: {},
restrict: 'E',
template: '<span class="oinky">{{box.size}}</span>',
link: function(scope, element, attrs) {
if({{box.size}}>50 && {{box.size}}<=65) {
element.css("background", "rgba(255, 216, 61, 0.7)");
}else if({{box.size}}>65 && {{box.size}}<80){
element.css("background", "rgba(235, 149, 51, 0.7)");
}else if({{box.size}}>=80){
element.css("background", "rgba(189, 45, 40, 0.7)");
}else{
element.css("background", "rgba(185, 211, 50, 0.7)");
}
}
};
});
类似这样的事情。抱歉,如果我对框架的了解似乎很原始,但我无法在 google 或 StackOverflow 上找到任何好的答案。
感谢您的帮助!
最佳答案
您缺少的一点是该指令的用户如何设置box.size
的值。您已使用 scope:{}
声明创建了一个隔离范围,因此目前无法将 box.size
设置为任何值。
假设您希望将其作为一个独立的组件(即不从父作用域读取),您可以在指令作用域上设置 boxsize
并在使用指令时由用户设置:
app.directive('x', function() {
return {
scope: {
boxSize:"=size"
},
restrict: 'E',
template: '<span class="oinky">{{boxSize}}</span>',
link: function(scope, element, attrs) {
if(scope.boxSize>50 && scope.boxSize<=65) {
element.css("background", "rgba(255, 216, 61, 0.7)");
} else if(scope.boxSize>65 && scope.boxSize<80){
element.css("background", "rgba(235, 149, 51, 0.7)");
} else if(scope.boxSize>=80){
element.css("background", "rgba(189, 45, 40, 0.7)");
} else{
element.css("background", "rgba(185, 211, 50, 0.7)");
}
}
};
});
然后可以使用:
<x size="55"/>
有关指令范围的更多信息,请查看 $compile
的文档,奇怪的是,这是指令信息的最佳位置:( https://docs.angularjs.org/api/ng/service/ $compile
更新:使用父范围
要使用父作用域,只需删除 scope: {}
部分即可。这意味着 link
函数的 scope
参数将是父级的参数。
类似于:
app.directive('x', function() {
return {
restrict: 'E',
template: '<span class="oinky">{{box.size}}</span>',
link: function(scope, element, attrs) {
if(scope.box.size>50 && scope.box.size<=65) {
element.css("background", "rgba(255, 216, 61, 0.7)");
} else if(scope.box.size>65 && scope.box.size<80){
element.css("background", "rgba(235, 149, 51, 0.7)");
} else if(scope.box.size>=80){
element.css("background", "rgba(189, 45, 40, 0.7)");
} else{
element.css("background", "rgba(185, 211, 50, 0.7)");
}
}
};
});
假设父作用域有一个带有 size
属性的 box
对象。
关于javascript - 使用 jqlite 定位 Angular 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32188905/