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嵌套對象和$應用範圍

回答

相關問題