angularjs使用模板编译json

我是angularjs新手，有jquery背景

我想将json从服务器编译成一个带有模板的元素

到目前为止，我所拥有的是：

模板：

<script type="text/ng-template" id="/tiles.html">
    <div ng-repeat="tile in tiles">
       <a href="" ng-click="imageOptions.addImage()">{{tile.name}}<img ng-src="tile.src" /></a>
    </div>
</script>

用于显示内容的按钮：

<button ng-click="imageOptions.addFromList()">+ Add Image from list</button>

+从列表中添加图像

职能：

$scope.imageOptions.addFromList = function (){

    $http
        .get('/json/Tiles/get')
        .success(function(data){
            $scope.tiles = data;
            console.log(data);
        })
        .error(function(data){
            console.log("something did go wrong");
        });

        $(".prompt").html('<div ng-include src="/tiles.html"></div>');
};

$scope.imageOptions.addFromList=函数（）{
$http
.get（'/json/Tiles/get'）
.成功（功能（数据）{
$scope.tiles=数据；
控制台日志（数据）；
})
.错误（函数（数据）{
log（“出了点问题”）；
});
$（“.prompt”）.html（“”）；
};

占位符：

<div class="prompt"></div>

占位符将与其他内容一起使用多次。 因此，我不能仅仅从.html（）参数中键入html。像这样：

<div class="prompt"><div ng-include src="/tiles.html"></div></div>

当我检查.prompt div时，它将保持未编译状态

<div ng-include src="/tiles.html">

对此

<div ng-include src="'/tiles.html'">

---

您应该做的第一件事是在熟悉angular方法的同时从应用程序中删除jQuery库

当您只需要通过各种不同的方式在html源代码中包含模板时，就不需要使用

html（）

方法

如果数据不可用于

ng repeat

，它只会安静地失败，什么也不做。然后，当数据可用时，它将自动响应

你可以简单地做：

<div class="prompt" ng-include src="/tiles.html"></div>

---

在用angularjs编写单页应用程序时，理想情况下不需要首先获取对元素的引用，然后对其执行某些操作（您可能会认为这是从jquery后台切换到angularjs域的第一步）

要实现模型、视图和控制器的完全分离，只需相应地定义模板和控制器。这些映射和引用应由angularjs自行管理

如上所述，您不应该使用jquery的.html（）方法。如果您在文档中包含了jquery，angularjs将在内部使用它，但是，包含jquery对于使用angularjs不应是强制性的

ng repeat和ng include还创建了一个单独的作用域，因此您可能希望在将来处理这些问题

对于您的查询，您可以通过在ng include中包含额外的引号来引用模板：

<div class="prompt">
        <div ng-include src="'tiles.html'"></div>
</div>

---

这里的解决方案不需要jquery。

<div class="prompt">
        <div ng-include src="'tiles.html'"></div>
</div>