AngularJS指令没有设置第二级作用域对象

AngularJS directive doesn't set 2nd level of scope object

本文关键字：二级 作用域 对象 指令 设置 AngularJS      更新时间：2023-09-26

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

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

恰好

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>

首先将指令更改为如下内容:var text =' scope.'+attributes.ngModel+'='+element.html();eval(文本),

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

为了使它不覆盖all对象，除了对对象赋值之外，还需要其他东西。比如下划线_。扩展可以工作。

感谢@Kinnza，他找出了原因，我在Angular中找到了一种方法:

我取代了 

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


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

现在运行正常

相关文章：