HTMLブロックの範囲をAngularで定義する方法は？

Question

私はアプリケーションページに非常に大きなフォームを持っていて、JSON変数を持っています。そこにはすべてのフォームデータが保存されていて、私はcontrollerAs式を使用しています。

<form> 
    <input type="text" data-ng-model="ctrl.myJSON.name"/> 
    <input type="text" data-ng-model="ctrl.myJSON.old"/> 
    <input type="text" data-ng-model="ctrl.myJSON.address"/> 
    <input type="text" data-ng-model="ctrl.myJSON.email"/> 
    <input type="text" data-ng-model="ctrl.myJSON.phone"/> 
    <!-- and many more... --> 
</form> 

はどのように私は不要のため、すべてのフィールドに、この変数の多くの時間を繰り返し、フォームのスコープとしてmyJSONを定義することができますか？

Answer 1

角度拡張を使用してjsonデータを$ scopeにコピーすることができます。そして、あなたが直接使用することができます。その後

.controller('YourController', function($scope) { 

    $scope.readData = function() { 
     // replace with your read data function 
     var myJSON = { name: 'test' }; 
     angular.extend($scope, myJSON); 
    } 

} 

を、変数が直接動作します：

ラップ

<input type="text" data-ng-model="name"/> 

Answer 2

フォーム別の、専用コントローラFormController内側とmyJsonキーと値のペアをコピーその$scopeに

This is possibleスコープの継承/ネストされたスコープを使用して、Angularのそれ以降のバージョンになります。

HTML

​​

はJavaScript

var myApp = angular.module('myApp', []); 
myApp.controller('MainController', ['$scope', function($scope) { 
    // other logic goes here 
}]); 
myApp.controller('FormController', ['$scope', function($scope) { 
    // Initialize myJson by loading its data from a service 

    angular.extend($scope, myJson); 
}]); 

JSFiddle：https://jsfiddle.net/206redxb/5