AngularJS:如何编写带有可选属性参数的元素指令？

Question

我正在执行 AngularJS 指令的第一步。只需将此设置为输出产品名称的练习:

.directive('productname', function (Prefs) {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            templateUrl: '/partials/productname.html',
            link: function (scope, element, attrs) {
                scope.brand = Prefs.owner;
            }
        }
    })

产品名称.html

<span class="productname"><span class="brand">{{brand}}</span> <span class="product" ng-transclude>{{productname}}</span></span>

所以用法很明显:<productname>{{product.name}}</productname>

现在，有人可以告诉我应该如何通过添加一个标志来输出链接的产品名称来使该指令可配置吗？

用法为:<productname linked>{{product.name}}</productname>输出/模板将是:

<span class="productname"><a href="/edit/{{id}}"> <span class="brand">{{brand}}</span> <span class="product" ng-transclude>{{productname}}</span></a></span>

看起来很复杂，我不太清楚应该在哪里注入(inject)逻辑......

Answer 1

首先，您应该使用指令声明的scope 属性。此外，在这种情况下您不需要 transclude。像这样:

.directive('productname', function (Prefs) {
    return {
        restrict: 'E',
        scope: {
            product: "=",
            linked: "="
        },
        replace: true,
        templateUrl: '/partials/productname.html',
        link: function (scope, element, attrs) {
            // scope.product and scope.linked are automatically set
            scope.brand = Prefs.owner;
        }
    }
})

和模板:

<span class="productname" ng-switch="linked">
    <a href="/edit/{{id}}" ng-switch-when="true">
        <span class="brand">{{brand}}</span>
        <span class="product">{{product.name}}</span>
    </a>
    <span ng-switch-default>
        <span class="brand">{{brand}}</span>
        <span class="product">{{product.name}}</span>
    </span>
</span>

像这样调用模板:

<productname product="product"></productname>

或:

<productname product="product" linked="'true'"></productname>

更新

如果你想使用 linked 属性作为标志，你可以通过使用 attrs 变量来实现:

.directive('productname', function (Prefs) {
    return {
        restrict: 'E',
        scope: {
            product: "="
        },
        replace: true,
        templateUrl: '/partials/productname.html',
        link: function (scope, element, attrs) {
            // scope.product is automatically set
            scope.linked = typeof attrs.linked != 'undefined';
            scope.brand = Prefs.owner;
        }
    }
})

这样调用它:

<productname product="product" linked></productname>