Angular - 将变量传递给指令作用域

Question

我想将一个对象传递给指令作用域：

JS代码：

app.directive('validatePrice', function() {
    return {
        link: function(scope, el, attrs){
            console.log(attrs.validatePrice);
        }
    };
});

HTML

<button validate-price="{priceValid: {'disabled': 'disabled'}}">结账</button>

其中priceValid是从控制器范围内获取的布尔值，{'disabled': 'disabled'}只是一个普通对象。我期望我的attrs.validatePrice返回例如：

{
    true: {'disabled': 'disabled'}
}

“它返回字符串。我该怎么做？ :)”

- acid

Answer 1

我认为你想要的是不可能实现的。priceValid将被JavaScript解释为对象键，而不会被解释为true。

无论如何，如果你没有使用隔离作用域，那么$parse或$eval是你需要使用的来向指令传递一个对象：

<button validate-price="{priceValid: {'disabled': 'disabled'}}">Checkout</button>

app.directive('validatePrice', function($parse) {
    return {
        link: function(scope, el, attrs){
            var model = $parse(attrs.validatePrice);
            console.log(model(scope));
            console.log(scope.$eval(attrs.validatePrice));
        }
    };
});

fiddle

如果你需要修改对象，请使用$parse。可以参考https://dev59.com/q2Uo5IYBdhLWcg3w2CaJ#15725402中的示例。

- Mark Rajcok

Answer 2

<validate-price-dir validate-price="{priceValid: {'disabled': 'disabled'}}">Checkout</validate-price-dir>    

app.directive('validatePriceDir', function() {
    return {
        restrict: 'E',
        scope: { validatePrice: '=validatePrice' },
        link: function(scope, el, attrs){
            console.log(scope.validatePrice);
        }
   };
});

- karaxuna

---

它不仅返回字符串，还会抛出“Error: 10 $digest() iterations reached. Aborting!”的错误。 - acid

默认情况下，指令被限制为类型A（属性）。如果您有一个与指令同名的属性，则会导致无限循环。 - Eduard Gamonal