擴展一個指令並添加到模板

我一直在試圖找出這個問題，查看S.O和其他網站，但我無法弄清楚。我對Angular仍然很陌生，所以我無法理解它的概念。我希望有人能回答我自己的問題，並試圖幫助我理解。擴展一個指令並添加到模板

我想修改第三方指令並添加一個<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(); 
    }; 
});

我怎樣才能讓我的代碼工作，下面的答案？

來源

2015-11-13 kinx

難道你不能把這個指令包裝在另一個指令中嗎？ –

示例？我不完全理解這將如何工作？ @miparnisari – kinx

因此，這是裝飾來幫忙，看看這裏的工作示例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; 
    }); 
});

在這裏，我只是把按鈕放在最後，但你可以將它添加到你需要的地方。可能使用正則表達式，而不是像我一樣懶。乾杯!

來源

2015-11-13 02:45:30

謝謝！我到底在哪裏添加？在我擁有的站點（客戶聘請我之前構建的站點）中，有一個控制器，指令和服務指令+一個app.js.另外，點擊按鈕時如何運行角碼？ – kinx

我建議在app.js文件中做它，因爲它在配置階段。 –

這看起來合適嗎？ http://i.imgur.com/cfaDDUq.png – kinx

擴展一個指令並添加到模板

回答

相關問題