我在ng-repeater中有一个指令,应该设置一个scope属性。 请在此处查看小提琴:http://jsfiddle.net/paos/CSbRB/
问题是scope属性是作为属性值给出的,如下所示:
<button ng-update1="inputdata.title">click me</button>
该指令应该将scope属性inputdata.title设置为某个字符串。这不起作用:
app.directive('ngUpdate1', function() {
return function(scope, element, attrs) {
element.bind('click', function() {
scope.$apply(function() {
scope[ attrs.ngUpdate1 ] = "Button 1";
});
});
};
});
但是,直接分配有效:
scope["inputdata"]["title"] = "Button 1";
请告诉我如何设置范围属性。从指令中获取其名称的符号?
PS:小提琴使用转发器的原因是因为它使指令在子范围内。当它们位于子作用域中时,您无法写入作为基元的作用域属性。这就是为什么我需要一个带有“。”的对象属性。在名字里。请参阅此处的详细说明:What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
谢谢
答案 0 :(得分:35)
$parse将解决您的问题。
<button ng-update1="inputdata.title">
app.directive('ngUpdate1', function($parse) {
return function(scope, element, attrs) {
var model = $parse(attrs.ngUpdate1);
console.log(model(scope)); // logs "test"
element.bind('click', function() {
model.assign(scope, "Button 1");
scope.$apply();
});
};
});
每当指令不使用隔离范围并使用属性指定范围属性,并且您想要修改该值时,请使用$parse
。
如果您不需要修改该值,则可以改为使用$eval
:
console.log(scope.$eval(attrs.ngUpdate1));
答案 1 :(得分:2)
不确定总体目标是什么,但一种方法是创建2个属性,一个用于目标对象,另一个用于该对象的属性:
<button ng-update1 obj="inputdata" prop="title">
app.directive('ngUpdate1', function() {
return function(scope, element, attrs) {
element.bind('click', function() {
scope.$apply(function() {
scope[ attrs.obj ][attrs.prop] = "Button 1";
});
});
};
});
样本:http://jsfiddle.net/CSbRB/9/
或者使用现有格式,您可以split()
当前ng-update1
属性的值,并使用结果数组作为符号中的对象和属性
element.bind('click', function() {
var target=attrs.ngUpdate1.split('.');
scope.$apply(function() {
scope[ target[0] ][target[1]] = "Button 1";
});
});
DEMO采用两种方法:http://jsfiddle.net/CSbRB/10/
另一种方法是在指令中创建一个独立的范围,并且可以传入对inputdata
对象的引用,并从属性中提取属性名称(与第二个版本相同的标记):
app.directive('ngUpdate3', function () {
return {
scope: {
targetObject: '=obj'
},
link: function (scope, element, attrs) {
element.bind('click', function () {
scope.$apply(function () {
scope.targetObject[attrs.prop]='Button 3';
});
});
}
}
});