0

Daniel Crisps AngularJS Range Slider https://github.com/danielcrasp/angular-rangesliderを使用しており、彼のディレクティブを拡張してテンプレートを変更したいと考えています。

彼のディレクティブは次のようになります (スペースを省略しています)。

angular.module('ui-rangeSlider', [])
.directive('rangeSlider', [
    function () {
       return {
          restrict: 'A',
          replace: true,
          template: ['<div class="ngrs-range-slider">',
                         '<div class="ngrs-runner">',
                           '<div class="ngrs-handle ngrs-handle-min"><i></i></div>',
                           '<div class="ngrs-handle ngrs-handle-max"><i></i></div>',
                           '<div class="ngrs-join"></div>',
                         '</div>',
                         '<div class="ngrs-value-runner">',
                           '<div class="ngrs-value ngrs-value-min" ng-show="showValues"><div>{{filteredModelMin}}</div></div>',
                           '<div class="ngrs-value ngrs-value-max" ng-show="showValues"><div>{{filteredModelMax}}</div></div>',
                         '</div>',
                       '</div>'].join('')
       }
    }
]);

私は、ディレクティブにまったく同じ名前を付けることによって、この質問の拡張 Angular ディレクティブの提案を使用しようとしています (たとえば、短縮されています)。

angular.module('myDirective', [])
.directive('rangeSlider', [
    function () {
        return {
            restrict: 'A',
            priority: 500,
            template: ['<div></div><div></div>'].join('')
        }
    }
]);

しかし、次のエラーが発生しています: 複数のディレクティブ [rangeSlider, rangeSlider] がテンプレートを要求しています:

ソースで変更せずに元のテンプレートを更新するにはどうすればよいですか?

編集：私の例では余分な「）」がありました。

4

3 に答える 3

3

コードに手を加えることなく、AngularJS でエラーを発生させることなく、サードパーティのテンプレートを変更できる方法を見つけました。module.config()独自のモジュールで同じ名前のディレクティブを定義する代わりに、 with を使用してサードパーティ モジュールでディレクティブを装飾するという点で、あなたの試みとは少し異なります$provide。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script>
    // third-party code - cannot be modified
    angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
        return {
            restrict: 'A',
            replace: true,
            template: '<div>base</div>'
        };
    }]);

    // this is your extension overriding the original template
    angular.module('ui-rangeSlider').config(['$provide', function($provide) {
        $provide.decorator('rangeSliderDirective', function($delegate) {
            var dir = $delegate[0];

            dir.template = ['<div>', dir.template, '<div>extended</div></div>'].join('');

            return $delegate;
        })
    }]);

    // this is your app
    angular.module('sample', ['ui-rangeSlider']);
</script>
<body ng-app="sample">
    <div range-slider></div>
</body>

これはhttps://jsfiddle.net/sjxwLe4k/4/でライブで試すことができます。

于 2015-08-20T03:11:51.140 に答える
2

AngularJS ディレクティブ (できればバージョン 1.5.*) を拡張する方法について一連のスタック オーバーフロー検索を行った後、これがうまくいきました。

上記の例のデコレータと $delegate をわずかに変更して、Angular 1.5.8 で動作するようにします。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

<script>
        angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
        return {
            restrict: 'A',
            replace: true,
            template: ['<div>base</div>'].join('')
        };
    }]);
    angular.module('myDirective', []).directive('rangeSlider', [function() {
        return {
            restrict: 'A',
            priority: 500,
            template: ['<div>extended</div>'].join('')
        }
    }]);
    angular.module('sample', ['ui-rangeSlider', 'myDirective'])
        .decorator('rangeSliderDirective', ['$delegate', function($delegate){
            console.log($delegate);
          $delegate.shift();
          return $delegate;
        }]);
</script>

<body ng-app="sample">
    <div range-slider></div>
</body>

上記のコードがここで動作していることを確認できます:
https://jsfiddle.net/sjxwLe4k/6/

于 2016-11-29T21:57:58.707 に答える