AngularJS:从<script type=“application/json”>获取json数据到控制器中

AngularJS: Get json data from <script type="application/json"> into controller

本文关键字：json 获取 数据 控制器 script type AngularJS application      更新时间：2023-09-26

我还不能在我的应用程序中使用"单页"应用程序概念，因为我们有遗留代码来处理和"棱角化"我们的应用程序缓慢但稳定。我需要为不同的表单添加一些 Angular 功能，这些表单仍将通过 POST 提交但不由 Ajax 触发。因此，我在向服务器开机自检后获取更改数据的想法是这样的：

<script type="application/json" json-data ng-model="data">
    <?php echo json_encode($myData, true); ?>
</script>

现在对我来说失败的是将脚本标记内部的 json 数据获取到我的控制器范围内。我为此编写了一个自定义指令：

angular.module('app').directive('jsonData', [function() {
    return {
        restrict: 'A',
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attributes, controller) {
            var object = JSON.parse(element.html());
            attributes.ngModel = object;
        },
        controller: function($scope) {
            console.log($scope.ngModel);
        }
    };
}]);

但是，这不会更新我的角度控制器中的$scope（不，我不是指指令的控制器）。

您可以运行此 plunker 以了解我的问题：http://plnkr.co/edit/O4FZUgN21LRRfqyDQCVT

应删除隔离范围。然后，您可以使用 ng-model 属性填充新的范围变量。

<script type="application/json" json-data ng-model="data">{"sample": "data"}</script>
<script type="application/json" json-data ng-model="data2">{"sample": "more data"}</script>
<script type="application/json" json-data ng-model="data3">{"sample": "even more data"}</script>
<pre>{{data | json}}</pre>
<pre>{{data2 | json}}</pre>
<pre>{{data3 | json}}</pre>
<pre>{{test | json}}</pre>

命令

app.directive('jsonData', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attributes, controller) {
            scope[attributes.ngModel] = JSON.parse(element.html());
        }
    };
}]);

http://plnkr.co/edit/INyT5KTKaq5Hr6teOFiz?p=preview

相关文章：