1

私のディレクティブは正常に機能し、すべてのトレンド タグが表示されます。ディレクティブは、$scope オブジェクトで trendingTag プロパティを探します。だから私は範囲を持っています：真

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

    };
});

ここで、ディレクティブの属性に基づいて、オプション (read-only="true" など) に基づいて構成できるようにしたいと考えています。そして、そのような属性に基づいてテンプレートのマイナーな側面を条件付きで変更することができます

<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

完全を期すために、アクションのバインディングを含む私の実用的なソリューションを次に示します。どんな批評も歓迎します。ありがとうございます。

ディレクティブ:

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 に答える
1

通常の手順では、isolate スコープを使用して、ディレクティブに必要な変数を渡します (要素に複数のディレクティブが必要な場合を除く)。これにより、ディレクティブがより再利用可能でテストしやすくなり、ディレクティブが周囲に結合されないため、コードがより明確になります。

あなたの場合、このような分離スコープを書くと

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 に答える