Question

我是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>');
};

占位符：

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

占位符将与其他内容一起使用多次。所以我不能只从.html（）参数中输入html。像这样：

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

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

Answer 1

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

当您需要做的只是在html源代码中以各种不同的方式包含模板时，无需使用html()方法。

如果ng-repeat数据尚未可用，则只会安静地失败并且不执行任何操作。然后，当数据可用时，它将自动响应。

你可以这样做：

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

或者你可以制作一个简单的指令来完成同样的事情。

app.directive('prompt', function() {
  return {
    restrict: 'C',/* use for "class" */
    templateUrl: '/tiles.html'
  }
});

Answer 2

只需更改此

即可

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

到这个

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

Answer 3

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

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

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

ng-repeat和ng-include也会创建一个单独的范围，因此您可能希望将来也能处理这些范围。

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

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

http://jsfiddle.net/PKKp8/

angularjs用模板编译json

3 个答案: