スコープスープを浄化するために直ちに更新を行わなくても表示されない

Question

私は自己スコープのスコープスープの犠牲になり、これを修正するための措置を講じています。私はジョシュ・キャロルがここに書いた記事のいくつかを採用しています：
http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html。このアプローチの

詳しい情報もここで見つけることができます：
https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

このアプローチは、すでに多くのオブジェクト指向のスタイルで、新鮮な空気の息となって、それをずっとクリーンではるかに管理しやすいアプローチをもたらしました。

しかし、私は特定の問題がある壁に当たっています：すぐに更新されないビュー私はそれは参照しているものと何か関係があると思う：$ scope vs controller vs。

ctrl.addTask（）が呼び出されると、新しいタスクレコードが正常にDBに挿入されます。ただし、新しいタスクはng-repeat（新しいgetTasks（）呼び出しで呼び出されます）を介してビューにすぐには表示されず、手動ページの更新後にのみ表示されます。私の混乱は、特にテスト目的のために、特にgetTasks（）を呼び出す別のボタンをページ上に配置し、毎回新しいタスクでビューを直ちに更新することによってさらに進んでいます。

のindex.html：

<section ng-controller="TaskCtrl as ctrl"> 
    <div class="container"> 
     <form name="addTaskForm"> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="taskName" ng-model="ctrl.addTaskData.taskName" placeholder="New Task Name" ng-focus="addNewClicked"> 
       <div class="form-group-btn"> 
        <button class="btn btn-default" type="submit" ng-click="ctrl.addTask();"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button> 
       </div> 
     </form> 
    </div> 
</section> 
<section ng-controller="TaskCtrl as ctrl"> 
    <div class="row" ng-repeat="task in ctrl.tasksData" repeatdirective> 
     <div class="col-xs-12 vcenter"> 
      <a href="/task/{{ task.id }}">{{ task.name || "Error - Task Names Should Not be Empty" }}</a> 
     </div> 
    </div> 
</section> 

app.js

var app = angular.module('tasksApp', []); 

var TasksCtrl = function($filter, $scope, $window, $http, $location) { 

    var _this = this; 

    _this.getTasks = function() { 
     var request = $http({ 
      method  : 'POST', 
      url   : '/handler.php', 
      data  : { 
       'action' : 'getAllTasks' 
      }, 
      headers : { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      }, 
      responseType: 'json' 
     }).then(function successCallback(response) { 
      _this.tasksData = response.data; 
      console.log("getTasks() successCallback"); 
     }, function errorCallback(response) { 
      console.log("getTasks() errorCallback"); 
     }); 
    }; 
    _this.getTasks(); 

    _this.addTaskData = {}; 
    _this.addTask = function() { 
     var request = $http({ 
      method  : 'POST', 
      url   : '/handler.php', 
      data  : { 
       'action'    : 'addTask', 
       'taskName'    : _this.addTaskData.taskName, 
       'startDate'    : '', 
       'endDate'    : '' 
      }, 
      headers : { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      }, 
      responseType: 'json' 
     }).then(function successCallback(response) { 
      console.log("addTask() successCallback"); 
      _this.getTasks(); 
      _this.addTaskForm.$setPristine(); 
      _this.addTaskData = {}; 
     }, function errorCallback(response) { 
      console.log("addTask() errorCallback"); 
     });   
    }; 
} 

TaskCtrl.$inject = ['$filter', '$scope', '$window', '$http', '$location']; 
app.controller('TaskCtrl', TaskCtrl); 

私はに再び結ばれる独自のサービスへのhttpを削除することをお勧めしますことを承知していますコントローラ。これは私の$スコープスープをさらにきれいにする努力の次のステップの1つです。まだ関数呼び出しによって作成されたクロージャを使用 コントローラ

を参照する_thisの値を「通過」する.bind（）メソッドを使用し

• ：問題（複数可）を解決するための救済を試み

  $ apply（） - これを統合しようとするたびに$ apply（）が未定義のエラーが返されました。

上記の3つの方法のいずれかが適切に実装されていない可能性があります。また、特定の問題に焦点を当てるためにコードの多くが削除されていることにも注意してください。

すべての指導やフィードバックは大変ありがとうございます。

Answer 1

あなたのHTMLをチェックしてください - あなたはTaskCtrlの2つのインスタンスを持っているので、の2 <section>タグを持っています。まず、新しいタスクを追加する処理と、新しいタスクを印刷するタスクです。

addtaskを呼び出すと、この最初のコントローラからが呼び出され、この最初のコントローラでtaskDataが更新されます。

ng-controllerを1つだけ使用すると動作します。

<section ng-controller="TaskCtrl as ctrl"> 
    <div class="container"> 
     <form name="addTaskForm"> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="taskName" ng-model="ctrl.addTaskData.taskName" placeholder="New Task Name" ng-focus="addNewClicked"> 
       <div class="form-group-btn"> 
        <button class="btn btn-default" type="submit" ng-click="ctrl.addTask();"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task</button> 
       </div> 
     </form> 
    </div> 
    <div class="row" ng-repeat="task in ctrl.tasksData" repeatdirective> 
     <div class="col-xs-12 vcenter"> 
      <a href="/task/{{ task.id }}">{{ task.name || "Error - Task Names Should Not be Empty" }}</a> 
     </div> 
    </div> 
</section> 

また、データを格納したデータのみがこのサービスに保存され、共有することができるので、両方のコントローラにそれを注入するサービスを利用することができます。