如何json輸出整個範圍？

Question

{foo|json}很適合輸出$ scope的子集。如何將整個範圍發送到json過濾器？

Answer 1

事實證明，即使您試圖通過使用controllerAs語法並將注入的$scope附加到您的上下文來欺騙它，JSON過濾器也不會允許您輸出整個$scope對象。

模板：

<div ng-app="app"> 
    <div ng-controller="TestCtrl as vm"> 
     <div ng-bind="vm.foo | json"></div> 
     <div ng-bind="vm.scope | json"></div> 
    </div> 
</div> 

JS：

var app = angular.module('app', []) 
    .controller('TestCtrl', function ($scope) { 
     var vm = this; 

     vm.foo = { 
      bar: "test bar", 
      foobar: "test foobar" 
     }; 

     vm.scope = $scope; 

     console.log(vm.scope); 
    }); 

在這個例子中Fiddle，

{ "bar": "test bar", "foobar": "test foobar" } 

用於vm.foo輸出但

"$SCOPE" 

輸出爲vm.scope。

因此，它會出現你不能發送實際的作用域對象到JSON過濾器。您需要循環並創建一個僅包含所需相關數據的新對象。在這種情況下，您不能使用angular.copy，因爲角度會禁止它。

Answer 2

Angular擁有自己的json函數，它可以防止您正常執行此操作。

function toJson(obj, pretty) { 
    if (typeof obj === 'undefined') return undefined; 
    return JSON.stringify(obj, toJsonReplacer, pretty ? ' ' : null); 
} 

function toJsonReplacer(key, value) { 
    .... 
    } else if (isScope(value)) { 
    val = '$SCOPE'; 
    } 
    .... 
} 

除非你這樣做，否則可能是一種黑客行爲，因爲這個=== $ scope在角模板中。

<div ng-repeat="(k, v) in ($$=this)"> 
    <div ng-if="k!='$$' && k!='this'">key: {{k}} 
     <pre ng-bind="$$[k]|json:4"></pre> 
    </div> 
</div> 

全部摘錄或fiddle

var app = angular.module('app', []) 
 
.controller('TestCtrl', function ($scope) { 
 

 
    $scope.foo = { 
 
    bar: "test bar", 
 
    foobar: "test foobar" 
 
    }; 
 

 
    $scope.zzz = { 
 
    bar: "test bar", 
 
    foobar: "test foobar" 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="TestCtrl"> 
 
     <div ng-repeat="(k, v) in ($$=this)"> 
 
      <div ng-if="k!='$$' && k!='this'">key: {{k}} 
 
       <pre ng-bind="$$[k]|json:4"></pre> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

或者如果你想獲得$範圍作爲單個對象JSON，你可以不喜歡這裏，或fiddle

<div ng-init="$scope={}"> 
    <div ng-repeat="(k, v) in ($$=this)" ng-init="$scope[k] = $$[k]" ng-if="k!=='$$'&&k!=='this'&&k!=='$scope'"> 
    </div> 
</div> 
<pre ng-bind="$scope|json:4"></pre> 

哪個outp ut

{ 
    "foo": { 
    "bar": "test bar", 
    "foobar": "test foobar" 
    }, 
    "zzz": { 
    "bar": "test bar", 
    "foobar": "test foobar" 
    } 
}