AngularJS:将布尔值传递给指令

Question

我无法将boolean值传递给我的指令.

这是我的HMTL:

<city-zip city="clientCity" zip="clientZip" requiredParam="'true'"></city-zip>

指令:

.directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '='
        },
        controller: function($scope) {}
    }
});

任何帮助将非常感激.

Answer 1

HTML

<city-zip city="clientCity" zip="clientZip" required-param="true"></city-zip>
<city-zip city="clientCity" zip="clientZip" required-param="{{ someBooleanValue }}"></city-zip>

角

.directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '=',
            requiredParam:'@'
        },
        link: function(scope) {
            console.log("requiredParam", scope.requiredParam);
        }
    }
})

Answer 2

在里面link,您可以访问该属性:

return {
    // code
    link: link
}

function link(scope, $el, attrs) {
    var requiredParam = attrs.requiredParam === 'true';
}

这会将字符串值强制转换为布尔值(如果字符串值为'true',则返回true,否则返回false.)

这里的主要部分是如何转换为字符串值"真"或"假"到它的布尔形式,因为!!'true'和!!'false'这两个返回true.请参阅此答案以获得解决方案和扩展讨论.

如果需要使用控制器中的值,可以在scope对象中执行相同的模式,并将其以强制形式传递给耦合控制器.

Answer 3

我认为这个问题还没有包括最简单/最干净的答案.这个答案也符合布尔属性的HTML5规范 - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2布尔属性

许多属性是布尔属性.元素上存在布尔属性表示真值,缺少属性表示false值.

如果该属性存在,则其值必须是空字符串,或者是属性的规范名称的ASCII不区分大小写匹配的值,没有前导或尾随空格.

布尔属性不允许使用值"true"和"false".要表示错误值,必须完全省略该属性.

HTML:

<city-zip city="clientCity" zip="clientZip" requiredParam></city-zip>

指令:

.directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '='
        },
        controller: function($scope, $attrs) {
            $scope.requiredParamExists = $attrs.hasOwnProperty( 'requiredParam' );
        }
    }
});

简单,适用于布尔属性的HTML5规范,并且不需要将字符串强制转换为范围变量('requiredParam': '=').

注意:在上面的示例代码,如果精缩,所需的变量$scope,并$attrs会改为较短的字符串,并破解密码,但这是另一个问题.