javascript - Angular - 将变量传递给指令范围

Question

我想将一个对象传递给指令范围：

JS：

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

HTML

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

wherepriceValid是来自控制器范围的布尔值，{'disabled': 'disabled'}只是一个普通对象。我希望我attrs.validatePrice能回来，例如：

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

然而它返回字符串。我怎么做？:)

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));
        }
    };
});

小提琴

如果需要更改对象，请使用 $parse。有关示例，请参见https://stackoverflow.com/a/15725402/215945 。

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);
        }
   };
});