動態添加angularjs指令

我想寫一個指令，動態地向DOM添加另一種類型的指令並編譯它們。它似乎在使用字符串模板時工作，但在使用templateUrl時失敗。這裏的工作模板字符串的的jsfiddle：動態添加angularjs指令

app.directive('clicker', function($compile) { 
    'use strict'; 

    return { 
     compile: function(tElement, tAttrs) { 
      var t = '<div data-pop>Pop</div>'; 

      return function(scope, iElement) { 
       iElement.click(function() { 
        $('body').append($compile(t)(scope)); 
       }); 
      }; 
     } 
    } 
}); 

app.directive('pop', function() { 
    'use strict'; 

    return { 
     template: '<div>Testing template</div>' 
     //templateUrl: 'partials/pop.html' 
    }; 
});

http://jsfiddle.net/89AYX/

但是如果換到templateUrl（含究竟是什麼在模板字符串的HTML文件），它只會工作一次。它確實向DOM添加了一個元素，但它不包含templateUrl內容，也沒有在動態添加的指令中調用鏈接函數...

試圖添加其中兩個將使DOM看起來像這樣：

<div data-pop><!-- content of pop.html --></div> 
<div data-pop></div> 
<div data-pop></div>

來源

2012-11-19 abe

坦率地說，這看起來像一個錯誤。雖然，我無法真正想到一個很好的理由去做你想做的事情。你試圖完成什麼，你不能用ng-repeat完成？ –

我有一個用戶列表，我用ng-repeat渲染出來，但我想註冊一個onclick處理程序來動態創建一個模式，這是我創建的一個指令（理想情況下使用templateUrl）。這種模式繼承了ng-repeat的用戶範圍。 – abe

爲什麼不只在頁面上註冊模態指令的單個實例，然後在重複的項目中單擊ng來改變範圍以顯示模態？爲什麼需要動態添加模態指令？ –

添加範圍$ apply（）爲我工作。使用jQuery 1.9.0和Angular 1.0.3進行測試。

iElement.bind('click', function() { 
    $('body').append($compile(t)(scope)); 
    scope.$apply(); // cause a $digest cycle to run, since we're "outside" Angular 
});

這fiddle使用內聯的模板，但我也有一個本地網絡服務器是不得不做一個單獨的HTTP GET來獲得部分進行測試。

來源

2013-01-19 22:56:56

而$ apply只是它作爲dom回調的結果。可以用[這種方式]完成（http://jsfiddle.net/Fedxy/）。 – ShawnFumo

您好，請您提供關於我的新建議API的建議，以編程方式將指令添加爲更簡單的過程？ https://github.com/angular/angular.js/issues/6950謝謝！ – trusktr

動態添加angularjs指令

回答

相關問題