在ngDialog中提交表單後，角度視圖不會更新範圍更改

Question

我是Angular的新手，我試圖構建一個強大的todo應用程序用於學習目的。有可能是我做錯了一些基本的事情，但無法弄清楚。我認爲這是我配置我的控制器和模板的方式。我已經嘗試了類似問題中找到的一些建議，但沒有解決我的問題。我試過使用$scope.$apply()，但我得到了「應用/摘要已在進行中」錯誤。

我使用ngRoute，所以當有人去/profile它調用profileController和加載templates/profile.html。除了設置當前用戶並附加到$rootScope之外，此控制器不會執行任何操作。在配置文件視圖內部，我有一個名爲listController的嵌套控制器。我將List資源傳遞給listController以發出http請求。就路由和獲取/發佈請求而言，一切工作都正常。

這裏是我的控制器的一個簡單的例子：

var myApp = angular.module('todo', ['ngRoute', 'ngResource']) 
    // config stuff... 
    .controller('listController', ['$scope', 'List', 'ngDialog', function ($scope, List, ngDialog) { 
     // This correctly returns all lists for the current user 
     $scope.lists = List.query(); 

     // Open modal form function 
     $scope.openModal = function() { 
      ngDialog.open({ 
       template: 'templates/partials/new-list.html', 
       className: 'ngdialog-theme-default' 
      }); 
     }; 

     $scope.createList = function() { 
      List.save({}, { 
       name: $scope.list.name, 
       description: $scope.list.description 
      }).$promise.then(function(result) { 
       $scope.lists.push(result); 
      }); 
     }; 
    }]); 

這裏是templates/profile.html有關部分正確地顯示從List.query()檢索到的所有名單：

<div class="todo-sidebar" ng-controller="listController"> 
    <h3>Your lists <a href="#" ng-click="openModal()"><span>New list</span></a></h3> 
     <ul> 
      <li ng-repeat="list in lists"> 
       <a href="#"><span class="list-name">{{list.name}}</span></a> 
     </li> 
    </ul> 
</div> 

問題是，當我致電createList功能從我的templates/partials/new-list.html部分：

<div class="dialog-contents" ng-controller="listController"> 
    <h3>New list</h3> 
    <form ng-submit="createList()"> 
     <div class="form-group"> 
      <label>Name</label> 
      <input type="text" name="name" ng-model="list.name"> 
      <textarea name="description" ng-model="list.description" rows="10"></textarea> 
      <button type="submit" class="button">Create list</button> 
     </div> 
    </form> 
</div> 

表單發佈正確，我可以看到我的數據庫中的新列表，但該視圖不會實時更新。當我在承諾內console.log($scope)看來，我的新列表已被添加到範圍。

我有一種感覺，將控制器附加到多個元素/模板並不是最佳實踐，但我不確定該如何構造它。

Answer 1

好吧，經過一番研究，我想我有一個解決方案給你。所以發生的是你沒有正確解析對話框的關閉。

僅供參考這裏是我使用的鏈接：

https://github.com/likeastore/ngDialog#api

範圍

什麼你在這裏處理是一個範圍的問題。當對話框打開時，它將使用自己的控制器生成一個單獨的模塊。該控制器的作用域是單向綁定，在解析後不會被父作用域看到。所以這就是爲什麼你的作用域沒有在父作用域級別更新的原因。

有關如何，請參閱關於承諾的下一部分。

承諾

要在父級別管理的範圍，你會需要一些所謂的承諾的功能，或者更簡單的是發生在對話結束完全解決後一個功能。在處理promise函數時，會有一些初始回調，允許您將數據傳遞給promise，當初始化promise時，這是您何時能夠訪問該數據，然後這些數據將與父項級作用域變量。

對於此解決方案，我提供了一些可能對您有所幫助的更新代碼。

更新的代碼

如果我理解你的代碼是如何工作以及模塊的工作原理更新的功能看起來應該像下面這樣。我想這給一個鏡頭：

var myApp = angular.module('todo', ['ngRoute', 'ngResource']) 
// config stuff... 
.controller('listController', ['$scope', 'List', 'ngDialog', function  ($scope, List, ngDialog) { 
    // This correctly returns all lists for the current user 
    $scope.lists = List.query(); 

    // Open modal form function 
    $scope.openModal = function() { 
     var dialog = ngDialog.open({ 
      template: 'templates/partials/new-list.html', 
      className: 'ngdialog-theme-default', 
      controller : function($scope){ 
       $scope.createList = function(){ 
        dialog.close($scope.list); // where data is the list data 
       }; 
      } 
     }); 
     dialog.closePromise.then(function(data){ 
      // at this point data is your list and then you can update the value as you see with like normal 
      List.save({}, { 
       name: $scope.list.name, 
       description: $scope.list.description 
      }).$promise.then(function(result) { 
       $scope.lists.push(result); 
      }); 
     }); 
    }; 
}]); 

再次，這僅僅是你需要做一個粗略的模板，但你這是怎麼會仍然實現它。

我希望這可以幫助，請問是否有任何問題。

Answer 2

你正在處理我認爲的$範圍問題。價值在那裏，但你並沒有參考你的想法。通過控制器參考「列表」，像這樣...

<li ng-repeat="list in MyController.lists"> 

應該解決您的問題。

希望有所幫助。

這將解釋它遠勝於我就能。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#ngRepeat