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

我非常抱歉朋友，你将不得不重写它。

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

每当您使用$provide#decorator时，您都会将原始实例作为名为$delegate的本地可注入实体。

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

你要做的第一件事是找出原始实现如何利用你想要修改的东西，以免破坏整个事情。

幸运的是，您要修改的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时，它就会使用你刚给它的硬编码模板。

Moar链接！

extend-input-directive@StackOverflow （这是正确的方式，而不是正确的方式）
Experiment: Decorating Directives (by Jesus Rodriguez)

Answer 2

您可以使用AngularJS装饰器修改指令，如下所示：

MessageCenterModule
  .config(function ($provide) {
    $provide.decorator('mcMessagesDirective', function ($delegate) {

      var directive = $delegate[0];
      //assign a new value to the template
      directive.template = 'My template';
      return $delegate;

    });
  });

Angular 1.3.15在第三方指令中覆盖变量

2 个答案: