Question

我的指令工作正常，显示所有趋势标签。该指令在$ scope对象中查找trendingTag属性。所以我有范围：真的

app.directive('ngTrending', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , scope: true
        , templateUrl: '/resources/ngViews/trending.html'

    };
});

现在我希望能够根据指令的属性，根据选项（如read-only =“true”）对其进行配置。并且能够基于attrbute这样有条件地改变模板的次要方面

<ng-trending></ng-trending>

在启用操作的情况下生成趋势标记。而

 <ng-trending read-only="true"></ng-trending>

生成代码，但禁用了点击次数。如何编写指令的范围，以便我仍然继承托管指令的控制器的范围，例如。

<div ng-controller="fancy">
    <ng-trending></ng-trending>
</div>

就像现在的情况一样（在指令的模板内部我引用了fancyContrllers $ scope.trendingTags属性）。但是在指令模板中我想引用$ scope中的“只读”。

我刚刚意识到我正在接近这个完全错误，并且我可能也希望传递趋势标签......我很困惑 - 请帮助理顺我！

感谢。

Answer 1

正常的过程是使用隔离范围在指令中传入您想要的任何变量（除非您在元素上需要多个指令）。这将导致更可重复使用且可测试的指令，以及更清晰的代码，因为指令不会与其周围环境耦合。

对于您的情况，如果您编写像这样的隔离范围

scope: {
    trendingTags: '=',
    readOnly: '='
    // ...
}

然后，您可以将外部作用域上的表达式绑定到内部作用域上的trendingTags，并使用元素上的属性将其绑定到readOnly。

你的元素看起来像这样

<ng-trending trending-tags="trendingTags" read-only="true"></ng-trending>

此处有关于隔离范围的更多信息http://docs.angularjs.org/guide/directive。

Answer 2

为了完整性，这里是我的工作解决方案，包括对操作的绑定。任何批评都受到欢迎。谢谢你andyrooger：

指令：

app.directive('ngTrending', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , scope: {
            trendingTags: '='
            , displayOnly: '='
            , inlineLabel: '='
            , filterTo: '&'
            , isFilteredTo: '&'
        }
        , templateUrl: '/resources/ngViews/trending.html'

    };
});

模板：

<div style="text-align: center">
    <div class="btn-group-xs">
        <span ng-show="(!!inlineLabel)" style="color: #81B1D9">Tagged: </span>
        <button ng-repeat="tag in trendingTags | orderBy:'count':true | limitTo:8" type="button" class="btn btn-default btn-primary"
                style="text-wrap: normal; margin: 2px;"
                ng-click="filterTo({filterToTag: tag.tagName})" ng-class="{active: isFilteredTo({filterToTag: tag.tagName}), disabled: (!!inlineLabel)}"><span
                ng-bind-html-unsafe="tag.tagName"></span> <span class="badge" ng-show="!(!!displayOnly)">{{ tag.count }}</span
        </button>
    </div>
    <button type="button" class="btn btn-xs btn-default" style="width: 150px; text-wrap: normal; margin-top: 3px"
            ng-click="filterTo({filterToTag: ''})" ng-show="!(!!displayOnly)">Clear
    </button>
</div>

使用中：

 <ng-trending trending-tags="tags"
                    filter-to="filterTo(filterToTag)"
                    is-filtered-to="isFilteredTo(filterToTag)"></ng-trending>

Angular Directive，Scope：True AND Add属性到范围

2 个答案: