더이상 업데이트하지 않고 스코프 스프를 청소하기위한 노력 즉시보기

Question

나는 자기가 부과 한 $ 스코프 수프의 희생양이되었으며 이것을 바로 잡기위한 조치를 취하고 있습니다. 나는 그의 기사에서 조쉬 캐롤 (Josh Carroll)이 작성한 몇 가지 방법을 채택하고있다 :
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> 

내가 그것을에 다시 연결되어 자신의 서비스에 HTTP를 제거하는 것이 좋습니다 것을 알고 있어요

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

을 app.js 컨트롤러. 이것은 나의 $ 범위 수프를 더 청소하는 나의 노력의 다음 단계 중 하나입니다. 여전히 함수 호출에 의해 생성 된 고정 사용 제어기

를 참조 _this의 값을 "전달"할 .bind() 메소드를 사용

• :

  시도 구제 문제 (들)을 해결하기위한 그래서 "_this"는 여전히 컨트롤러를 참조합니다.

• $ scope 사용하기 - $ apply() - $ apply()를 통합하기 위해 시도한 모든 시도는 $ apply()가 정의되지 않은 오류를 항상 반환했습니다.

위의 세 가지 방법 중 하나를 올바르게 구현하지 않았을 수 있습니다. 또한 특정 문제에 초점을 맞추기 위해 많은 코드가 다듬어졌습니다.

모든 안내 또는 의견을 보내 주시면 대단히 감사하겠습니다.

Answer 1

귀하의 html을 확인하십시오 - TaskCtrl의 인스턴스가 2 개 있으므로 개의 태그가 2 ng-controller=TaskCtrl as ctrl으로되어 있습니다. 첫 번째는 새로운 작업을 추가하는 것을 처리하는 것이고 다른 하나는 작업을 인쇄하는 작업입니다.

addtask을 호출하면 이 첫 번째 컨트롤러에서 호출되고이 첫 번째 컨트롤러에서 taskData이 업데이트됩니다.

ng-controller 한 개만 사용할 수 있습니다.

<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> 

또한 데이터를 저장하고 데이터가이 서비스에만 저장되고 공유 될 수 있도록 두 컨트롤러에 주입하는 서비스를 사용할 수 있습니다.