Question

在angularjs中将html项插入到存在模板HTML的简单方法是什么？例如，PHP中生成了模板：

<div id="block">
<!-- Insert here template from Angularjs-->
<div class="item"></div>
<div class="item"></div>
</div>

我可以使用Jquery，如：

$('#block').prepend('<div class="item"></div>');

我在Angularjs中的表现如何？

Answer 1

您可以使用jquery添加HTML，但您需要先使用

进行编译

var compiledHTML = $compile(html)($scope);

然后将其传递给jquery的方法

$('#block').prepend(compiledHTML);

但正如@cerad所提到的那样，这不是最好的方式。

Answer 2

您应该使用角度数据绑定，您还可以将其视为模板引擎。

例如：

你的HTML代码就是这个

<ul>
  <li ng-repeat="msg in allMsgs">{{msg}}</li>
</ul>

你的控制器代码就是这个

app.controller($scope){
   $scope.allMsgs = [];

   // i dont know socket.io well, so this part may not work :)
   // and it's better to separate it to a service and use $rootScope.$apply()
   soceket.on('msg',function(msg){
     $scope.$apply(function(){
        $scope.allMsgs.push(msg);
     });
   });
}

请注意，您需要使用$apply才能在数据生效时使数据绑定正常工作由角度无法控制的事件改变。

一些有用的链接

在angularjs中将html项插入到存在模板HTML的简单方法是什么？

2 个答案: