AngularJS-将数据插入dom

AngularJS-将数据插入dom

1）受此问题启发的第一个解决方案是

Module

的

value

方法：

<script>   var users_json = '[{"name":"Piotr"},{"name":"Natasha"}]'; // created by xsl   myApp.value("PrimaryData" , users_json );</script><ul>   <li ng-repeat="user in users">{{user.name}}</li></ul>

然后，我们可以

PrimaryData

在希望的时间和地点使用它，如下所示：

myApp.controller('MainCtrl', function($scope, PrimaryData) {    $scope.data = angular.copy(PrimaryData);     console.log( $scope.data[0].name === "John" );});

但是这种方式在我开始使用时对我不起作用

routes

，可能是因为

value

仅在应用程序初始化时运行。

2）接下来是第二种解决方案：指令。现在，当服务器发送路由的模板时，它将放入

script

一个带有

"text/template"

类型和特殊指令名称属性的标签，以及该标签中的json数据，如下所示：

<script  type = "text/template" rawdata >     <!-- "rawdata" is our directive   '[{"name":"Nelson"},{"name":"Luis"}]'      // created by xsl</script><ul>   <li ng-repeat="user in users">{{user.name}}</li>    // view is beside</ul>

并且此指令捕获它并将数据传递到当前路由的范围：

studio.directive('rawdata', function() {  return {    link: function(scope, element, attr, ctrl) {         if(scope.passRawData){ var data = (element[0].innerHTML); scope.passRawData(data); // Or simply scope.users = JSON.parse(data)        } else { console.log( "Scope has no passRawData method" );        }    }  }});

太棒了！:)