Javascript 如何在Angular中定义HTML块的作用域？

我的应用程序页面中有一个非常大的表单，我有一个

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

定义为表单范围，无需在所有字段中多次重复此变量？

您可以使用angular extend将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"/>

之后，变量将直接起作用：

.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"/>

---

将表单包装在单独的专用控制器

FormController

中，并将

myJson

键值对复制到其

$scope

中

在Angular的更高版本中，使用范围继承/嵌套范围

HTML

<div ng-controller="MainController">
    <form ng-controller="FormController">
        <input type="text" data-ng-model="name"/>
        <input type="text" data-ng-model="old"/>
        <input type="text" data-ng-model="address"/>
        <input type="text" data-ng-model="email"/>
        <input type="text" data-ng-model="phone"/>
        <!-- and many more... -->
    </form>
</div>

---

JSFiddle:

我认为这种方式可能会弄脏作用域，并会溢出到HTML块的另一部分。如果JSON的内容可以更改，那就有点侵入性了。您可以扩展到：angular.extend（this，myJSON）或扩展有限的属性：angular.extend（$scope，{name:myJSON.name，old:myJSON.old}）