ngDialogでフォームを送信した後、角度表示が更新されない

Question

私はAngularが新しく、学習目的で頑丈なtodoアプリケーションを作成しようとしています。おそらく私が間違っている基本的なことがあるかもしれませんが、それを理解することはできません。私はそれが私のコントローラとテンプレートが設定されている方法で何かだと仮定します。私は同様の質問にある推奨事項のいくつかを試しましたが、私の問題を解決するものはありません。私は$scope.$apply()を使ってみましたが、 "apply/digest already in progress"というエラーが出ます。

誰かが/profileに行くときにprofileControllerを呼び出し、templates/profile.htmlにロードするので、ngRouteを使用しています。このコントローラーは実際には現在のユーザーをセットアップして$rootScopeに接続する以外は何もしません。プロファイルビューの内部には、listControllerというネストされたコントローラがあります。私はListリソースをlistControllerに渡して、httpリクエストを行います。ルーティングとget/post要求まですべてが正しく機能しています。ここで

は私のコントローラの簡単な例です：

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); 
      }); 
     }; 
    }]); 

ここで正しくList.query()から取得したすべてのリストを表示するtemplates/profile.htmlの関連部分です：

<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

範囲

は、スコープの問題です。ダイアログボックスを開くと、それ自身のコントローラで別のモジュールが生成されます。このコントローラのスコープは一方向バインディングであり、解決時に親スコープでは認識されません。だから、あなたのスコープが親のスコープレベルで更新されていない理由がこれです。

方法については、次の節を参照してください。

約束

あなたが約束関数と呼ばれるもの、あるいは単純な用語で、ダイアログのクローズが完全に解決した後に発生した関数が必要になるだろう、親レベルでスコープを管理します。プロミス関数を扱うときには、データをプロミスに渡すことができる初期コールバックがあります。プロミスを初期化すると、そのデータにアクセスできるようになり、親に協力しますレベルスコープ変数。

このソリューションでは、私はあなたに役立つかもしれない少しの更新されたコードを提供しました。

更新されたコード

私はあなたのコードモジュールは、あなたの更新機能は、次のようになるはずですどのように機能するかと一緒にどのように機能するかを理解していた場合。これはちょうどあなたがする必要があると思います何のためにラフなテンプレートで再び

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