0

我正在使用 Daniel Crisps AngularJS Range Slider https://github.com/danielcrisp/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('')
       }
    }
]);

我一直在尝试通过将我的指令命名为完全相同的名称（例如缩写）来使用此问题中的建议Extending Angular Directive ：

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

After a bunch of stackoverflow searching on how to extend AngularJS Directives (preferably in version 1.5.*), this is what worked for me.

Slightly modifying the decorator and $delegate from the above examples to work with 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>

You can see the above code working here:
https://jsfiddle.net/sjxwLe4k/6/

于 2016-11-29T21:57:58.707 回答
0

看了你的例子之后。我可以毫无问题地运行它。我将“myDirective”和“ui-rangeSlider”都添加到了一个空的应用程序中，我没有遇到任何问题。我能够从 myDirective 中删除模板，它显示了 ui-rangeSlider 模板。

html:

<div range-slider></div>

完整示例：

<!doctype html>
<html ng-app="sample">
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script>
        angular.module('sample', ['ui-rangeSlider', 'myDirective']);
        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.module('myDirective', [])
                .directive('rangeSlider', [
                    function () {
                        return {
                            restrict: 'A',
                            priority: 500,
                            template: ['<div></div>test<div></div>'].join('')
                        }
                    }
                ]);
    </script>
  </head>
  <body>
    <div range-slider></div>
  </body>
</html>
于 2014-10-28T15:35:15.247 回答