Question

我有以下代码

<my-directive></my-directive>

我想评估其中的以下trenary：

{{ $scope.my-option ? 'YES' : 'NO' }}

像这样：

<my-directive my-option></my-directive>

我该怎么做？一旦我拥有该属性，它应该评估为true，对吧？我已经使用=符号绑定了该属性。

Answer 1

您不应在此处检查$scope.my-option，而应检查$scope.myOption。

CamelCased属性仅限于HTML代码中的蛇形;应该在所有剩余的JavaScript源代码中使用camelCase引用它们。

因此，您的HTML标记应该是：

<my-directive my-option></my-directive>

但你的AngularJS表达式将是：

{{ $scope.myOption ? 'YES' : 'NO' }}

甚至可能不需要$scope，将表达式减少为

{{ myOption ? 'YES' : 'NO' }}

此外，如果您不想在HTML中将检查明确添加为观察者，则可以使用指令的链接功能来执行此操作。 documentation更详细地解释了它。

在您的指令中，请使用它，如下面的代码段：

angular
    .module('myModule')
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            scope: {
                myOption: '=?'
            },
            link: function(scope, element) {
                if (scope.myOption) {
                    // you have the attribute
                } else {
                    // you don't
                }
            }
        }
    });

Answer 2

如果您没有隔离范围（也适用于隔离范围），您可以直接检查attrs：

angular
.module('myModule')
.directive('myDirective', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var option;
            if (attrs.hasOwnProperty('myOption')) {
                // if attr is plain string
                option = attrs.myOption;
                // or parse from a scope property
                option = $parse(attrs.myOption)(scope);
            }
        }
    }
});

检查指令是否具有属性

2 个答案: