1

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

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

    };
});

现在我希望能够基于指令上的属性基于选项（如只读=“真”）来配置它。并且能够根据诸如此类的属性有条件地更改模板的次要方面

<ng-trending></ng-trending>

生成启用操作的趋势标签。尽管

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

生成标签，但禁用了点击。如何对指令的范围进行编码，以便我仍然继承托管指令的控制器的范围，例如

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

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

我突然意识到我完全错误地处理了这个问题，并且我可能也想传递趋势标签......我很困惑 - 请帮助理顺我！

谢谢。

4

2 回答 2

1

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

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

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

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

然后你的元素看起来像这样

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

这里有一些关于隔离范围的更多信息http://docs.angularjs.org/guide/directive。

于 2013-10-14T19:38:16.143 回答
1

为了完整起见，这是我的工作解决方案，包括操作的绑定。欢迎任何批评。谢谢你，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>
于 2013-10-14T23:48:57.157 回答