Question

我目前正在开发一个基于AngularJS的SPA，尽管我已经阅读了所有文档，文章，问题等，但没有什么能够解释我遇到的情况。

愚蠢的是，我最后一次使用Angular，我很确定我遇到了这个问题并找到了解决方案。我再也找不到相同的解决方案。

Anyhoo ......基本上我有一个嵌套对象，

$scope.campaign = {
    title: '',
    description: '',
    limitations: 0,
    interactions: {
        follow: false,
        dm: false,
        message: ''
    },
    options: [
        { handle: '', hashtag: '' }
    ]
};

我在campaign.options上有一个基于初始值的转发器，效果很好。

然后，我在ng-click上附加了一些范围功能，以向campaign.options添加新项目

$scope.addOption = function() {
    $scope.campaign.options.push({
        handle: '',
        hashtag: ''
    });
}

以上内容无声地失败，但如果我为$watch添加campaign，则每次点击挂钩添加选项的按钮时都会触发。

如果我尝试使用$ apply作为$scope.$apply()或$scope.$apply(fn)，我会收到通用inprog错误。

除了简单地恢复使用单层对象之外，任何人都可以解释这一点。

编辑：对不起，我不认为我指出了问题是什么......

尽管我每次单击$scope.campaigns时都可以看到包含附加项的addOption数组，但UI未更新以反映它，但是如果我手动将$scope.campaigns设置为包含页面加载时的一些项目，它正确呈现，因此在修改范围时似乎没有更新。

...叹息

第二次编辑：

我的转发器：

<label>Enter the applicable options for this competition</label>
<div class="list-group">
    <p ng-if="!campaign.options">This competition needs some possible answers.</p>
    <div class="list-group-item" ng-repeater="(idx, option) in campaign.options">
        <div class="row">
            <div class="col-sm-5">
                <div class="form-group no-bottom-margin">
                    <div class="input-group">
                        <div class="input-group-addon">@</div>
                        <input type="text" class="form-control" ng-model="option.handle" placeholder="Handle">
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="form-group no-bottom-margin">
                    <div class="input-group">
                        <div class="input-group-addon">#</div>
                        <input type="text" class="form-control" ng-model="option.hashtag" placeholder="Hashtag">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <a class="btn btn-block btn-danger" ng-click="removeOption(idx)"><i class="fa fa-trash"></i></a>
            </div>
        </div>
    </div>
</div>
<a class="btn btn-block btn-success" ng-click="addOption()"><i class="fa fa-plus"></i> Add a new option</a>

尝试拨打$scope.$apply()时收到的错误是：

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.15/$rootScope/inprog?p0=%24apply
    at Error (native)
    at http://domain.com/bower_components/angular/angular.min.js:6:417
    at p (http://domain.com/bower_components/angular/angular.min.js:118:370)
    at n.$get.n.$apply (http://domain.com/bower_components/angular/angular.min.js:126:224)
    at n.$scope.addOption (http://domain.com/app/controllers/app/campaigns/add/competition.js:32:20)
    at ib.functionCall (http://domain.com/bower_components/angular/angular.min.js:199:303)
    at Ec.(anonymous function).compile.d.on.f (http://domain.com/bower_components/angular/angular.min.js:216:74)
    at n.$get.n.$eval (http://domain.com/bower_components/angular/angular.min.js:126:15)
    at n.$get.n.$apply (http://domain.com/bower_components/angular/angular.min.js:126:241)
    at HTMLAnchorElement.<anonymous> (http://domain.com/bower_components/angular/angular.min.js:216:126)

Answer 1

尝试在ng-repeat中使用track by $index。

否则，请尝试简化并隔离问题。我已经多次做过这种事情而没有问题。

AngularJS嵌套对象和$ apply＆the;范围

1 个答案: