AngularJS：将布尔值传递给指令

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

我认为这个问题尚未包含最简单/最干净的答案。这个答案也适合布尔属性的 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 3

在link内，可以访问属性：

return {
    // code
    link: link
}

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

这会将字符串值强制为布尔值（如果字符串值为'true'，它将返回true，否则将返回false。）

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

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

Answer 4

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

1. scope 给出了指令所在的控制器的范围。

2. element 传递有关应用它的 DOM 元素的信息

3. attributes 传递有关元素上所有 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