javascript - 扩展指令并添加到模板

Question

我一直试图解决这个问题，浏览了 S.O 和其他网站，但我无法弄清楚。我对 Angular 还很陌生，所以我无法理解它的概念。我希望有人能回答我自己的问题并尝试帮助我理解。

我正在尝试修改第 3 方指令并添加 <button>稍后将触发 Angular 中的一个函数。我需要以某种方式扩展该指令并添加它。

指令:https://github.com/irontec/angular-bootstrap-simple-chat

我不完全确定从哪里开始或者给出什么代码。我几乎只是使用页面上的默认代码。

我该怎么做？

编辑:我不确定如何修改我的 app.js 并在我的代码中使用以下答案(app.js，下面的代码片段):

'use strict';

angular.module('sg',
  ['sg.Directives.Popover',
  'sg.Directives.ToggleClass',
  'sg.MainCtrl',
  'sg.NavCtrl',
  'sg.DepositCtrl',
  'sg.Services',
  'ui.router',
  'firebase',
  'angular-svg-round-progress',
  'irontec.simpleChat'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state('main', {
        url: '/',
        views: {
          '': {
          templateUrl: 'js/template/main.html',
          controller: 'MainCtrl',
          },
          'nav': {
            templateUrl: 'js/template/nav.html',
            controller: 'NavCtrl'
          }
        }
      });
  }])
  .filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

如何使我的代码适用于以下答案？

Answer 1

这就是装饰器可以提供帮助的地方，看看这里的工作示例 http://plnkr.co/edit/hzp0waR03npsS1PVrr4c?p=preview

您需要做的就是在配置阶段授予指令并进行所需的更改

app.config(function($provide) {
  $provide.decorator('irontecSimpleChatDirective', function($delegate) {
    var directive = $delegate[0];

    console.log(directive);
    directive.template = '<div>'+ directive.template +'<button>my button</button></div>'
    return $delegate; 
  });
});

这里我只是把按钮放在最后，但你可以在你需要的地方添加它。可能使用正则表达式而不是像我一样懒。干杯!