Question

如何在指令中设置插值？我可以从以下代码中读取正确的值，但我无法设置它。

JS：

app.directive('ngMyDirective', function () {
    return function(scope, element, attrs) {
        console.log(scope.$eval(attrs.ngMyDirective));

        //set the interpolated attrs.ngMyDirective value somehow!!!
    }
});

HTML：

<div ng-my-directive="myscopevalue"></div>

其中myscopevalue是我控制器范围内的值。

Answer 1

每当指令不使用隔离范围并使用属性指定范围属性，并且您想要更改该属性的值时，我建议使用$parse。（我认为语法比$ eval更好。）

app.directive('ngMyDirective', function ($parse) {
    return function(scope, element, attrs) {
        var model = $parse(attrs.ngMyDirective);
        console.log(model(scope));
        model.assign(scope,'Anton');
        console.log(model(scope));
    }
});

fiddle

无论属性是否包含点，

$parse都有效。

Answer 2

如果要在作用域上设置值但不知道属性的名称（提前），可以使用object[property]语法：

scope[attrs.myNgDirective] = 'newValue';

如果属性中的字符串包含一个点（例如myObject.myProperty），则不起作用;您可以使用$eval进行分配：

// like calling  "myscopevalue = 'newValue'"
scope.$eval(attrs.myNgDirective + " = 'newValue'");

[更新：您应该使用$parse代替$eval。请参阅Mark's answer。]

如果您使用的是隔离范围，则可以使用=注释：

app.directive('ngMyDirective', function () {
    return {
        scope: {
            theValue: '=ngMyDirective'
        },
        link: function(scope, element, attrs) {
            // will automatically change parent scope value
            // associated by the variable name given to `attrs.ngMyDirective`
            scope.theValue = 'newValue';
        }
    }
});

您可以在this Angular/jQuery color picker JSFiddle example中看到这样的示例，其中在指令内分配scope.color会自动更新将传递到控制器范围内的指令的变量。

如何在angular指令中设置插值？

2 个答案: