javascript - Angular 1.3.15 覆盖第三方指令中的变量

Question

我决定使用 message service angular package在我当前的项目中。在其指令中有一个 var = templateString 我想将其编辑为我选择的模板。

我想知道如何编辑这个字符串而不弄乱原始代码。我读了一系列类似的答案，但最后我发现是创建一个完全覆盖它的指令。我只想编辑模板字符串并保留现有代码。

我使用的是 Angular 1.3.15

指令

MessageCenterModule.
  directive('mcMessages', ['$rootScope', 'messageCenterService', function ($rootScope, messageCenterService) {
    /*jshint multistr: true */
    var templateString = '\
    <div id="mc-messages-wrapper">\
      <div class="alert alert-{{ message.type }} {{ animation }}" ng-repeat="message in mcMessages">\
        <a class="close" ng-click="message.close();" data-dismiss="alert" aria-hidden="true">&times;</a>\
        <span ng-switch on="message.html">\
        <span ng-switch-when="true">\
          <span ng-bind-html="message.message"></span>\
        </span>\
        <span ng-switch-default>\
          {{ message.message }}\
        </span>\
      </div>\
    </div>\
    ';
    return {
      restrict: 'EA',
      template: templateString,
      link: function(scope, element, attrs) {
        // Bind the messages from the service to the root scope.
        messageCenterService.flush();
        var changeReaction = function (event, to, from) {
          // Update 'unseen' messages to be marked as 'shown'.
          messageCenterService.markShown();
          // Remove the messages that have been shown.
          messageCenterService.removeShown();
          $rootScope.mcMessages = messageCenterService.mcMessages;
          messageCenterService.flush();
        };
        if (messageCenterService.offlistener === undefined) {
          messageCenterService.offlistener = $rootScope.$on('$locationChangeSuccess', changeReaction);
        }
        scope.animation = attrs.animation || 'fade in';
      }
    };
  }]);

这可能吗？最好的方法是什么？

Answer 1

I'm so very sorry friend, you are going to have to override it.

YOINK!你要装饰它。听起来有点豪华，但是，嘿。它有效。

---

每当您使用$provide#decorator时，您可以通过名称 $delegate 获取作为本地可注入(inject)的原始实例。

因此，您可以保留您想要的，并丢弃您不需要的。

您要做的第一件事是弄清楚原始实现如何使用您想要修改的内容，以免破坏整个事物。

幸运的是，templateString您要修改的仅用作directive.template，因此它应该是一个相当简单的装饰。

事情会是这样的:

app.config(function ($provide) {
  /**
   * note the use of 'directivename' + 'Directive'.
   * Whenever you decorate a directive, you have to apply the 'Directive' suffix due to this: 
   * https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L727
   */
  $provide.decorator('mcMessagesDirective', function ($delegate) {
    /**
     * We're getting the item at the first index here, 
     * because the $delegate of a directive isn't quite an 'instance' - 
     * it's a collection of DDO's (directive definition objects) that
     * go by the same name. 
     *
     * Yes, the $compileProvider allows multiple directives with the same name. 
     * We're interested in the first one in this case.
     */
    var dir = $delegate[0]; 

    /**
     * Modify the template of the directive. 
     * You can either hardcode this, or:
     * - Decorate the directive so as to pass the template in. 
     * - Fetch a template with $http. 
     * - Inject a string from a service, constant, provider, you name it.
     */
    dir.template = 'your_own_custom_templateString';

    /**
     * Return the full collection of directives (or rather, 'the $delegate'). 
     */ 
    return $delegate; 
  });
});

就这样，每当您再次使用 mcMessages 时，它都会使用您刚刚提供的硬编码模板。

---

莫尔链接!

• extend-input-directive@StackOverflow (有正确的方法，也有不太正确的方法)
• Experiment: Decorating Directives (by Jesus Rodriguez)