18

我在 ng-repeater 中有一个指令，应该设置一个范围属性。请在此处查看小提琴：http: //jsfiddle.net/paos/CSbRB/

问题是 scope 属性是作为属性值给出的，如下所示：

<button ng-update1="inputdata.title">click me</button>

该指令应该将范围属性 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：小提琴使用中继器的原因是因为它使指令位于子范围内。当它们在子作用域中时，您不能写入作为原语的作用域属性。这就是为什么我需要一个带有“。”的对象属性。在名字里。请参阅此处的详细说明：AngularJS 中范围原型/原型继承的细微差别是什么？

谢谢

4

2 回答 2

37

$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));
于 2013-03-31T01:28:02.750 回答
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";               

            });
        });

两种方法的演示：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';

                });
            });
        }
    }
});

http://jsfiddle.net/CSbRB/11/

于 2013-03-30T19:08:11.803 回答