Javascript AngularJS指令不'；设置范围对象的第二级_Javascript_Angularjs_Angularjs Directive_Scope_Angularjs Scope

Javascript AngularJS指令不'；设置范围对象的第二级

javascript angularjs

Javascript AngularJS指令不'；设置范围对象的第二级,javascript,angularjs,angularjs-directive,scope,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Scope,Angularjs Scope,我使用一个指令从元素读取json数据，只要我的ng范围是像data这样的一级属性，这就可以正常工作。由于某些原因，我无法获取对象的第二级或更深层属性中的数据，例如data.search。我想这又是我遇到的一些奇怪的范围问题，或者我还没有完全理解为什么要设置第一级而不是第二级属性 JS angular.module('app', [ ]); angular.module('app').directive('jsonData', [function () { return {

我使用一个指令从

元素读取json数据，只要我的

ng范围

是像

data

这样的一级属性，这就可以正常工作。由于某些原因，我无法获取对象的第二级或更深层属性中的数据，例如

data.search

。我想这又是我遇到的一些奇怪的范围问题，或者我还没有完全理解

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

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: {
            }
        };
    }]);

标记：


前{边框：1px纯红色；填充：5px；}
二级
{“价格从”：“3”，“价格到”：“412”}
{{data.search}json}
第一级
{“价格从”：“3”，“价格到”：“412”}
{{data}json}

首先将指令更改为如下内容： var text='scope.'+attributes.ngModel+'='+element.html（）；评估（文本）

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

为了使其不覆盖所有对象，您需要的是除指定给对象之外的其他内容。

类似下划线u.extend的东西可以工作

多亏@Kinnza找到了原因，我找到了一种方法：

我换了

与

现在它工作得很好。

我认为对指令的第二次调用（第一级）覆盖了所有数据对象……还有一些带有“scope[attributes.ngModel]”的内容是不正确的。它将转换为scope['data.search'，我认为这与scope.data.search不同，您为什么需要这样做？你想解决什么问题？@Kinnza是的，它覆盖了整个对象，这就是为什么我想要它的二级属性。我如何避免它将其写入

scope['data.search']

而不是'scope.data.search```@charlietfl，因为我们在SPA中不使用Angular。它似乎完全是反向的。为什么不能将所有数据作为javascript脚本标记中的javascript变量传递。仍然不清楚您正试图解决什么问题

  <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>

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

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