Question

我无法将布尔值传递给我的指令。

这是我的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';
}

将字符串值强制转换为布尔值（如果字符串值为＆＃39; true＆＃39;，则它将返回true，否则它将返回false。）

这里的主要部分是如何转换字符串值＆＃34; true＆＃34;或＆＃34;假＆＃34;到它的布尔形式，因为!!'true'和!!'false'都返回true。有关解决方案和扩展讨论，请参阅this answer。

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

Answer 3

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

2.5.2布尔属性

许多属性是布尔属性。存在的   元素的布尔属性   代表真正的价值，而且   没有属性代表   虚假的价值。

如果属性存在，则其值必须为空字符串   或者是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将更改为更短的字符串并破坏代码，但这是另一个问题。

Answer 4

您可以在链接函数中传递3个参数，这些参数可用于指令。参数为scope，element和attributes。

scope给出了指令所在的控制器的范围。
element传递有关应用它的DOM元素的信息

属性传递有关元素上所有DOM元素属性的信息。

<city-zip ng-app="myapp" city="clientCity" zip="clientZip" required-param="true"></city-zip>

angular.module("myapp", []).directive('cityZip', function() {
return {
    restrict: 'E',
    templateUrl: '',
    scope: {
        requiredParam:'@'
    },
    link: function(scope, $el, attrs) {
        alert( attrs.requiredParam);
    }
}

}）

工作jsFiddle

AngularJS：将布尔值传递给指令

4 个答案: