在AngularJS中动态加载HTML元素

我是AngularJS的完整初学者，在过去花了我所有的时间在jQuery上。我想要做的是从数据源中读取页面的内容，填充各种HTML元素，然后显示它们。在AngularJS中动态加载HTML元素

所以我有是这样的，content.json：

{ 
    "1" : { 
     "Type" : "Title", 
     "Content" : "Welcome to this Site" 
    }, 
    "2" : { 
     "Type" : "TextBox", 
     "Content" : "<p>Introduction 1</p><p>Continued</p>" 
    }, 
    "3" : { 
     "Type" : "TextBox", 
     "Content" : "<p>Do these tasks</p>" 
    } 
}

然后一个HTML页面，其中包含：

<div ng-app="myapp"> 
    <div ng-controller="content" id="Content"> 
     <!-- Dynamic content to be loaded here --> 
    </div> 
</div>

我有几个简单的模板，TextBox.html：

<div class="TextBox">{{Content}}</div>

和Title.html：

<h1>{{Content}}</h1>

最后我AngularJS代码：

var app = angular.module('myapp', []); 
app.controller('content', ['$scope','$http',function($scope,$http) { 

    $http.get('content.json').success(function(data){ 
     $scope.elements = data; 

     // What do I do now? 
    }); 
}]);

是否有可能通过JSON数据迭代，加载由“类型”属性定义的模板，使用“内容”属性填充它，并然后在“#Content”div中显示所有元素？我会怎么做？

这是在AngularJS中完成这类任务的正确方法吗？我感觉我可能正在用jQuery的思维方式来解决这个问题，并且我想在太过分之前检查一下。

来源

2014-12-03 Sam King

可能重复[AngularJS - 动态创建元素指定指令（http://stackoverflow.com/questions/20025526/angularjs-dynamically-creating-elements-that-specify-directives ） – Fals 2014-12-03 15:16:18

这根本不是这个问题的重复。 – 2014-12-19 09:30:52

首先使用阵列，而不是一个词典：

[ 
    { 
     "id": "1", 
     "Type" : "Title.html", 
     "Content" : "Welcome to this Site" 
    }, 
    { 
     "id" :"2", 
     "Type" : "TextBox.html", 
     "Content" : "<p>Introduction 1</p><p>Continued</p>" 
    }, 
    { 
     "id": "3", 
     "Type" : "TextBox.html", 
     "Content" : "<p>Do these tasks</p>" 
    } 
]

其次，使用NG-INIT别名内容，和NG-包括加载模板。重复过您的收藏：

<div ng-app="myapp"> 
    <div ng-controller="content" id="Content"> 
     <!-- Dynamic content to be loaded here --> 
     <div ng-repeat="item in elements" ng-init="Content=item.Content"> 
      <ng-include src="item.Type"></ng-include> 
     </div> 
    </div> 
</div>

的

来源

2014-12-03 15:35:06 pixelbits

它的工作，谢谢！然而，我不得不做一些小的修改：我的模板需要ng-bind-html =“Content”来正确呈现HTML，并且ng-include的src需要成为src =“item.Type +”的.html'” – 2014-12-04 15:31:49

在AngularJS中动态加载HTML元素

回答

相关问题