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

Question

我决定在当前项目中使用消息服务角度包 。 在它的指令中有一个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 ，它都会使用你刚给它的硬编码模板。

---

鼹鼠链接！

• extend-input-directive @ StackOverflow （这是正确的方式，而不是正确的方式）
• 实验：装饰指令（作者：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;

    });
  });