这是我的Plunker:
http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt
单击该按钮时,应在“Hello World!”之前插入以下内容:跨度:
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
当然,减去脚本标签。
我通过动态插入以下div来实现这一点:
<div ng-include="tempTest"></div>
然后编译它。但是,如果查看日志,编译后剩下的唯一内容是:
<!-- ngInclude: tempTest -->
这里发生了什么?为什么我的插件没有正确编译?逻辑如下:
$scope.insert = function(){
// Create elements //
var container = angular.element('<div id="compiled-container"></div>');
var element = angular.element('<div ng-include="tempTest"></div>');
//Insert parent Container
$('#greeting').before(container);
// insert the element
$animate.enter(element, container);
// test insertion
console.log("Before Compile: " +container.html() )
$compile(element);
//look again after compile
console.log("After Compile: " +container.html() )
};
答案 0 :(得分:45)
快速答案可能是:
<div ng-include="'tempTest'"></div>
可能你只是忘记引用模板的单引号。
长回答:
不建议访问控制器内的DOM - 您将遇到麻烦,因为代码将充满$scope.$apply()
个调用。考虑使用指令实现此功能。我试图在这里用你的代码创建一个起点
http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3
var app = angular.module('plunker', ['ngAnimate']);
app.directive('greeting', function($compile){
return {
restrict: 'E',
scope: {
name: '='
},
template: '<div>'+
' <span>Hello {{name}}!</span>'+
' <button ng-click="insert()">test</button>'+
'</div>',
link: function(scope, element, attrs) {
scope.insert = function() {
var container = angular.element('<div ng-include="\'tempTest.html\'"></div>');
element.before($compile(container)(scope));
}
}
}
})
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<greeting name="name"></greeting>
模板元素在Hello World之前插入!每次单击按钮时都会显示textnode。
旁注您甚至不需要scope{ name: '='}
,因为该指令将继承其周围的范围,但它是将控制器变量显式传递(实际绑定)到指令的更简洁方法。 / p>
答案 1 :(得分:2)
<div ng-include src="tempTest"></div>
这应该有效
^^^请注意,这将 NOT 甚至开始工作,除非添加单引号(如@JHixson已经指出的那样),如下所示:
<div ng-include src="'tempTest'"></div>
答案 2 :(得分:0)
只需你的脚本:
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
必须位于 MainCtrl 控制器选择器中,如下所示:
<div ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
</div>