Question

我们在AngularJS控制器上有一个有点复杂的模型：

function controller($scope) {
    $scope.model = {
        childmodel1: {
            childmodel2: {
                property1: 'abc',
                property2: 3,
                property3: 0.5,
                property4: 'abc'
            }
        }
    }
}

在HTML标记中，我们不希望每次访问childmodel2时都重复整个访问链：

<div ng-controller="ctrl">
    <div>
        <input type="text" ng-model="model.childmodel1.childmodel2.property1" />
        <input type="text" ng-model="model.childmodel1.childmodel2.property2" />
        <input type="text" ng-model="model.childmodel1.childmodel2.property3" />
        <input type="text" ng-model="model.childmodel1.childmodel2.property4" />
    </div>
</div>

是否有一个AngularJS指令可以创建如下的子范围：

<div ng-controller="ctrl">
    <div ng-unknowndirective="model.childmodel1.childmodel2">
        <input type="text" ng-model="property1" />
        <input type="text" ng-model="property2" />
        <input type="text" ng-model="property3" />
        <input type="text" ng-model="property4" />
    </div>
</div>

与ng-repeat完成的事情相同，但没有重复：）

我们尝试了ng-scope，ng-controller，ng-model，但这些都不是这样的。谷歌搜索没有产生任何结果，我们不知道要搜索的术语。

Answer 1

谢谢@Ufuk，这是我的解决方案：

mt.directive('subscope', function () {
    return {
        scope: {
            subscope: '='
        }
    };
});

和

<div ng-controller="ctrl">
    <div subscope="model.childmodel1.childmodel2">
        <input type="text" ng-model="subscope.property1" />
        <input type="text" ng-model="subscope.property2" />
        <input type="text" ng-model="subscope.property3" />
        <input type="text" ng-model="subscope.property4" />
    </div>
</div>

Answer 2

您可以使用ng-init来取消access chain

<div ng-init="childmodel2 = model.childmodel1.childmodel2">
    <input type="text" ng-model="childmodel2.property1" />
    <input type="text" ng-model="childmodel2.property2" />
    <input type="text" ng-model="childmodel2.property3" />
    <input type="text" ng-model="childmodel2.property4" />
</div>

创建alias model。更合适的是在控制器中创建别名，如

$scope.childmodel2 = $scope.model.childmodel1.childmodel2 // and remove ng-init from HTML

Demo

将<div>绑定到Angular控制器的元素</div>

2 个答案: