Обновление контроллеров/элементов пользовательского интерфейса в угловых

Question

При работе над проектом, как это происходит, мы сталкиваемся с ситуацией, когда мы были в тупике о том, как обновлять определенные элементы пользовательского интерфейса, когда делаются другие вещи. Например, навигация содержит счетчик количества ожидающих действий. В любой момент времени при использовании приложения пользователь может планировать действие для более позднего сегодняшнего дня, а в секции count необходимо вызвать API для создания счетчика и связанных с ним элементов раскрывающегося списка.

Как я могу заставить контроллер навигации вывести новый список действий, когда основной контроллер вносит изменения?

См. Например, this code.

<div ng-app="TestApp"> 
    <nav ng-controller="navigationController"> 
    <p>The navigation count is: {{items.length}}</p> 
    </nav> 
    <div ng-controller="mainController"> 
    <p>The main count is: {{items.length}}</p> 
    <p> 
     <button ng-click="addItem()" type="button">Add item.</button> 
    </p> 
    </div> 
</div> 

<script> 
var app = angular.module('TestApp', []); 

app.factory("api", function() { 
    return { 
    update: function() { 
     return ['a', 'b', 'c', 'd', 'e']; 
    } 
    }; 
}); 

app.factory("sharedFactory", function(api) { 
    var obj = {}; 

    obj.items = ["a"]; 

    obj.update = function() { 
    obj.items = api.update(); 
    }; 

    return obj; 
}); 

app.controller("mainController", function(sharedFactory, $scope) { 
    $scope.items = sharedFactory.items; 

    $scope.addItem = function() { 
    sharedFactory.update(); 
    }; 
}); 

app.controller("navigationController", function(sharedFactory, $scope) { 
    $scope.items = sharedFactory.items; 
}); 

</script> 

Наше нынешнее решение было create a callback service что другие контроллеры могли подписаться, а затем, когда деятельность была создана еще эти обратные вызовы работать по мере необходимости. Это работает хорошо, но я нервничаю, что я «делаю это неправильно».

Теперь мы переключаемся на Угловой UI-маршрутизатор, поэтому мне любопытно, есть ли в этом лучший способ сделать это. Прямо сейчас наш обработчик навигации является контроллером без состояния, который все еще подключается к нашей службе обратного вызова.

Answer 1

Хороший способ справиться с этим можно было бы использовать $scope.$on для прослушивания событий, и $scope.$emit огнь события восходя сферу или $scope.$broadcast стрелять даже спускаясь сферой.

В каждой части пользовательского интерфейса, который необходимо обновить, можно прослушивать $scope.$on и обновлять себя при запуске события, например, для вашего пользователя, планирующего событие на сегодня.

Angular docs for $on, $emit and $broadcast

Answer 2

Хотя я обычно считаю, что регистрация значений области на контроллере с помощью службы - лучший способ выполнить другой вариант - это использовать фабрику и установить свойство этого объекта в области видимости.

angular.module('app').factory('myService', function() { 
    var myService = {}; 
    service.count = 0; 
    /// other service functions 
    return myService; 
} 


angular.module('app').controller('myController', function(myService) { 
    this.count = myService.count; 
} 

Answer 3

Однако вы чувствуете о MVC, вы можете использовать внутренние угловые, чтобы делать это автоматически:

https://jsfiddle.net/gkmtkxpm/

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

myApp.factory('counter', function() { 
    return { 
     count: 0 
    }; 
}); 

myApp.controller('CounterController', function (counter) { 
    var vm = this; 

    vm.counter = counter; 
    vm.increment = function() { 
     vm.counter.count = vm.counter.count + 1; 
    }; 
}); 

редактировать: Относительно обновленный вопрос см обновленный сценарий: https://jsfiddle.net/gkmtkxpm/1/