AngularJS如何动态添加HTML并绑定到控制器
我刚刚开始使用angularJS，正在努力为我想要做的事情找出合适的架构。我有一个单页面应用程序，但是的URL应该始终保持相同的；我不希望用户能够导航到根目录之外的任何路由。在我的应用中，有一个主要的div需要托管不同的视图。当访问新视图时，我希望它接管主div中的显示。以这种方式加载的视图可以被丢弃，也可以隐藏在DOM中-我有兴趣了解每种视图是如何工作的。
我想出了一个粗略的工作示例来说明我想要做的事情。基本上，我希望动态地将See working example here in this Plunk.加载到DOM中，并让标准的angularJS控制器能够与新的HTML挂钩。有没有比使用这里的自定义指令并使用$compile()连接到angular更好/更简单的方法呢？也许有一些类似于路由器的东西，但不需要URL进行更改即可操作？
这是我到目前为止使用的特殊指令(取自另一篇so post)：
// Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
myApp.directive('dynamic', function ($compile) {
return {
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
if (!html) {
return;
}
ele.html((typeof(html) === 'string') ? html : html.data);
$compile(ele.contents())(scope);
});
}
};
});谢谢,
安迪
回答 5
Stack Overflow用户
发布于 2013-11-08 05:00:01
我会使用内置的ngInclude指令。在下面的示例中，您甚至不需要编写任何javascript。模板可以很容易地存在于远程url中。
下面是一个有效的演示：http://plnkr.co/edit/5ImqWj65YllaCYD5kX5E?p=preview
<p>Select page content template via dropdown</p>
<select ng-model="template">
<option value="page1">Page 1</option>
<option value="page2">Page 2</option>
</select>
<p>Set page content template via button click</p>
<button ng-click="template='page2'">Show Page 2 Content</button>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="page1">
<h1 style="color: blue;">This is the page 1 content</h1>
</script>
<script type="text/ng-template" id="page2">
<h1 style="color:green;">This is the page 2 content</h1>
</script>Stack Overflow用户
发布于 2014-03-09 04:55:41
还有另一种方法
- step 1: create a sample.html file
- step 2: create a div tag with一些id=loadhtml例如：
<div id="loadhtml"></div> - 第3步:在任何控制器中
var htmlcontent = $('#loadhtml ')；htmlcontent.load('/Pages/Common/contact.html') $compile(htmlcontent.contents())($scope);
这将在当前页面中加载一个html页面
Stack Overflow用户
发布于 2015-02-27 21:18:09
对于那些不能使用angular指令并被“卡住”在angular作用域之外的人，比如我，这里有一些东西可能会对你有所帮助。
在网上和angular文档上搜索了几个小时后，我创建了一个编译HTML的类，将其放在一个目标中，并将其绑定到一个作用域(如果该元素没有$scope，则为$rootScope)。
/**
* AngularHelper : Contains methods that help using angular without being in the scope of an angular controller or directive
*/
var AngularHelper = (function () {
var AngularHelper = function () { };
/**
* ApplicationName : Default application name for the helper
*/
var defaultApplicationName = "myApplicationName";
/**
* Compile : Compile html with the rootScope of an application
* and replace the content of a target element with the compiled html
* @$targetDom : The dom in which the compiled html should be placed
* @htmlToCompile : The html to compile using angular
* @applicationName : (Optionnal) The name of the application (use the default one if empty)
*/
AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) {
var $injector = angular.injector(["ng", applicationName || defaultApplicationName]);
$injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
//Get the scope of the target, use the rootScope if it does not exists
var $scope = $targetDom.html(htmlToCompile).scope();
$compile($targetDom)($scope || $rootScope);
$rootScope.$digest();
}]);
}
return AngularHelper;
})();它涵盖了我所有的案例，但如果你发现我应该添加一些东西，请随时评论或编辑。
希望这能有所帮助。
https://stackoverflow.com/questions/19845950
复制相似问题