Question

我使用指令从<script>元素中读取json数据，只要我的ng-scope是data等第一级属性，这就可以正常工作。出于某种原因，我没有在我的对象的第二级或更深级别属性中获取数据，例如data.search。我想这又是一些奇怪的范围问题，或者我还没有完全理解。

为什么设置第一级而不是第二级属性？

Plunker

JS

angular.module('app', [

]);

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

angular.module('app').controller('TestController', [
    '$scope',
    function ($scope) {

        $scope.searchTest = {};

        $scope.data = {
            search: {
            }
        };
    }]);

标记：

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="TestController">

        <style>
          pre { border: 1px solid red; padding: 5px ;}
        </style>

        <h3>2nd level</h3>
        <script type="application/json" json-data ng-model="data.search">
           {"price_from":"3","price_to":"412"}  
        </script>
        <pre>{{data.search | json}}</pre>

      <h3>1st level</h3>
       <script type="application/json" json-data ng-model="data">
           {"price_from":"3","price_to":"412"}  
        </script>
        <pre>{{data | json}}</pre>
  </body>

</html>

Answer 1

首先将指令更改为以下内容： var text ='scope。'+ attributes.ngModel +'='+ element.html（）; 的eval（文本）;

我不确定它是最好的方法，但它会比scope [attributes.ngModel]

更好地工作

为了不覆盖所有对象，除了分配给对象之外，还需要其他东西。像下划线_.extend这样的东西可以工作。

Answer 2

感谢@Kinnza找出了原因，我找到了一种在Angular中做到这一点的方法：

我已经取代了

scope[attributes.ngModel] = JSON.parse(element.html());

与

$parse(attributes.ngModel).assign(scope, JSON.parse(element.html()));

现在效果很好。

AngularJS指令不设置第二级范围对象

2 个答案: