Переключение между контроллерами, невозможно обновить вид

Question

В приведенном ниже списке задач вы можете добавить элемент, нажав синюю кнопку добавления и удалить отмеченные элементы кнопкой удаления.

Однако, как только вы удаляете любые предметы, добавление элементов не обновляет представление. Я подозреваю, что моя проблема заключается в том, что у двух контроллеров есть доступ к переменной todos.

DEMO

(function(){ 
'use strict'; 

angular.module('todoApp', ['ngMaterial', 'ngAnimate', 'ngAria' ]) 

    .directive('mainApp', function(){ 
     return { 
      restrict: 'E', 
      templateUrl: 'app.html', 
      controller: function($scope, $mdDialog){ 
       $scope.todos = todos; 

       $scope.someCompleted = function(){ 
        for (var i = 0; i < $scope.todos.length; i++) { 
         if ($scope.todos[i].done === true) { 
          return true; 
         } 
        } 
       }; 
       $scope.clearCompleted = function(){ 
        $scope.todos = $scope.todos.filter(function(item){ 
         return !item.done; 
        }); 
       }; 
       $scope.showAdvanced = function(ev) { 
        $mdDialog.show({ 
         controller: DialogController, 
         templateUrl: 'addDialog.html', 
         targetEvent: ev, 
        }); 
       }; 

      }, 
      controlerAs: 'list' 
     }; 

    }) 

; 
function DialogController($scope, $mdDialog) { 
    $scope.todos = todos; 
    $scope.hide = function() { 
     $mdDialog.hide(); 
    }; 
    $scope.cancel = function() { 
     $mdDialog.cancel(); 
    }; 
    $scope.answer = function(answer) { 
     $mdDialog.hide(answer); 
    }; 
    $scope.addTodo = function(){ 
     $scope.todos.push({name: $scope.newTodo, done: false}); 
     $scope.newTodo = null; 
     $mdDialog.hide(); 
    }; 
} 

var todos = []; 



})(); 

Answer 1

В начале, оба $ scope.todos в главном контроллере и DialogController точки к «Todo» массив, поэтому он может отображаться при добавлении нового элемента.

В функции clearComplete объект $ scope.todos теперь указывает на другой массив, а $ scope.todos в контроллере Dialog все еще указывает на массив «todo», поэтому, когда массив «todo» обновляется, $ scope.todos в основном контроллере остаются без изменений.

Изменение код clearComplete в этом:

$scope.clearCompleted = function(){ 
    todos = todos.filter(function(item){return !item.done;}); 
    $scope.todos = todo; //It might run without this line, just to make sure 
}; 

По дороге, Elegent решение для этого должно быть: Использование $ rootscope и вещания. Измените код Вашего DialogController:

function DialogController($scope, $mdDialog, $rootScope) { 
    //$scope.todos = todos; //Remove this line 

    $scope.addTodo = function(){ 
     //Broadcast an event, main controller will catch this 
     $rootScope.$broadcast("NoteAdded", {name: $scope.newTodo, done: false}); 
     $scope.newTodo = null; 
     $mdDialog.hide(); 
    }; 
} 

Тогда поймать событие в главном контроллере:

controller: function($scope, $mdDialog){ 
       $scope.todos = todos; 

       //other codes 

       $scope.$on("NoteAdded", function(event, item){ 
         $scope.todos.push(item); 
       });  
      }