AngularJS嵌套对象和$应用范围

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

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

安美居...基本上我有一个嵌套的对象，

$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，它激发我每次点击挂钩以增加选项。

如果我尝试使用$申请$scope.$apply()或$scope.$apply(fn)我得到通用inprog错误。

任何人都可以阐明这一点，而不是简单地回到使用单层对象。

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

尽管事实上，我可以看到$scope.campaigns阵列每次含有另外的项目我点击addOption用户界面是不是更新以反映它，但是如果我手动设置$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)

来源

2015-05-19 Gavin

不需要范围$ apply ...你能告诉我们中继器吗，怎么在范围上调用这个方法，你看到了什么错误？ – PSL

来吧加文，让我们看看你的重复HTML。 – Camusensei

你去了:) – Gavin

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

否则，请尝试简化并隔离问题。我多次没有问题地完成了这种确切的事情。

来源

2015-05-19 18:50:59

为什么有人给'-1'？ 'track by $ index'是一个很好的解决方案，如果他在他的例子中使用空元素... – Camusensei

不确定是谁-1'd它，但给了它一个没有运气的去，尽管我可以用它错误。 '在运动。选项中的ng-repeater =“（idx，option）跟踪idx”' - 在idx上尝试使用和不使用$？ – Gavin

我不认为跟踪是一个问题 – PSL

AngularJS嵌套对象和$应用范围

回答

相关问题