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

回答

相关问题