javascript - AngularJS - 获取插入 dom 的数据

Question

我正在寻找一种在加载应用程序后从 DOM 获取初始数据的方法。数据已被服务器插入到视图中。是Module'svalue方法是好方法吗？

我也想知道在使用时如何从视图中获取数据，我routes可以使用script标签在特定范围内注入数据吗？

我看到了这个和这个问题，但这并没有太大帮助。

Answer 1

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" );
        }
    }
  }
});

惊人的！:)