Angularjs - 動態添加和更新DOM

我試圖通過JavaScript具有指令添加HTML元素：Angularjs - 動態添加和更新DOM

document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; 
or 
var ele = document.createElement("div"); 
ele.setAttribute("ng-uc-day-event",""); 
document.getElementsByClassName("day-grid")[0].appendChild(ele);

兩個結果中加入div到.day-grid。我正在使用指令從外部文件加載模板到ng-uc-day-event。它從HTML文件運行時按預期工作，但在我從開發人員控制檯運行上述代碼時不起作用。

當我將元素添加到DOM時，如何讓angularjs調用指令或評估元素，以便在插入到.day-grid中時將模板加載到div？

下面是我使用的指令：

ulcal.directive("ngUcDayEvent", function ($timeout) { 
    return { 
    restrict: 'A', 
    templateUrl: 'views/dayevent.html', 
    link: function (s, e, a) { 
     $timeout(function() { 
     s.$emit("ucDayEventLoaded"); 
     }) 
    } 
    } 
});

來源

2014-10-27 Gopikrishna S

可能重複http://stackoverflow.com/questions/26447885/how-directives-are-invoked-if-an-element-that-contains- a-directive-is-added-dyna – 2014-10-27 04:00:12

@MichailMichailidis該問題用於添加控制器中的元素。我知道該怎麼做。我想知道的是如何從外部完全添加元素，例如：通過jquery，開發控制檯等任何方式鏈接也幫助我。謝謝 – 2015-03-21 00:52:01

這解決了我的問題：

inj = angular.injector(['ng', ApplicationName]); 
inj.invoke(function ($rootScope, $compile) { 
    ele = $compile("<div ng-uc-day-event></div>")($rootScope)[0]; 
    $(".day-grid").append(ele); 
});

來源

2015-02-16 23:40:13

你需要告訴角度來$compile模板，並將其與一個關聯範圍。 Angular在任意時間都不會識別插入到DOM中的HTML位。

將$compile服務注入到您正在進行DOM操作的任何位置。

var container = angular.element(document.getElementsByClassName('day-grid')[0]); 
var myDirective = angular.element('<div ng-uc-day-event></div>'); 

container.append(myDirective); 

$compile(container)(scope);

來源

2014-10-27 03:48:49 user2943490

這與從控制器添加元素類似：http://stackoverflow.com/questions/26447885/how-directives-are-invoked-if-an-element-that-contains-a-directive-is-加入-DYNA。我知道該怎麼做。我想知道的是如何從外部完全添加元素，例如：通過jquery，開發控制檯等任何方式您的答案也幫助我。謝謝 – 2015-03-21 00:53:13

Angularjs - 動態添加和更新DOM

回答

相關問題