2014-12-02 2 views
5

Я разрабатываю панель с сортируемыми, прикрепляемыми, плавающими виджетами. Один из элементов управления, которые я использую, генерирует плавающие виджеты в виде HTML в нижней части DOM, перед закрывающим тегом body. Это эффективно удаляет действия, выполняемые в элементах управления окном из области управления, из которой они сгенерированы.Как вручную обновлять AngularJS с использованием синтаксиса ControllerAs?

Я разрабатываю этот контроллер панели управления, используя синтаксис controllerAs, но я не могу понять, как эффективно обновлять представление с помощью этого синтаксиса когда внешний компонент выполняет действие, которое влияет на данные для представления?

Примечание: Это не единственное, с чем я столкнулся, что заставляет меня вручную обновлять основной вид. Существуют также директивы в другом месте страницы, которые выполняют действия, которые влияют на представление.

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

Так что ... если бы я использовал $scope я мог бы просто сделать:

$scope.$digest 

Или

$scope.$apply 

Но как я могу достичь того же влияет, используя контроллер, как?

var vm = this; 
vm.array = [item, item]; 
vm.something = something; 

//External something changes something on a vm.variable 

vm.update! //How?? 

ответ

6

С помощью «как» вы определяете способ обращения к области вашего контроллера во время просмотра.

Так что:

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
</body> 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

Равен это:

<body ng-controller="MainCtrl as main"> 
    <p>Hello {{main.name}}!</p> 
</body> 

Ваш контроллер:

app.controller('MainCtrl', function($scope) { 
    this.name = 'World'; 
}); 

DEMO

Так в основном вы должны быть в состоянии т o звоните this.$digest или this.$apply как вы бы сделали на $scope.

UPDATE

После выполнения некоторого поиска, я считаю, что правильное решение следует использовать $scope.apply() или $scope.digest().

Основной ресурс:
AngularJS’s Controller As and the vm Variable
Существует a comment растет ваш же вопрос и автор переигровку:

You can use $scope.$apply() in that case and just inject $scope for that purpose (still using vm for everything else). However, if you switch fro using ajax to using Angular's $http, then you won't need to call $apply as angular's $http does that for you. That's what I recommend

Другие ресурсы, которые я нашел:

+0

Использование 'вар vm = this; ', а затем' vm. $ digest(); 'вызывает ошибку:' Объект не поддерживает свойство или метод '$ digest''. – Blunderfest

+1

Я думаю, вам нужно использовать '$ scope. $ Digest()' или '$ scope. $ Apply()' в этом случае. Взгляните на [эту статью] (http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/), где он объясняет введение '$ scope' – pasine

+0

Я читал эту статью раньше, и я думаю, что она специально упоминает о вложении в объемную нагрузку в отношении часов или трансляций, что заставляет меня думать, что может быть способ применить обновления без ограничений. Там должен быть в любом случае. – Blunderfest

0

Попробуйте сделать ваше обновление в $ объеме $ применяется блок, как это:.

$scope.apply(function() { 
    vm.something = some_new_value; 
}); 

Чтобы избежать "Digest уже в процессе" ошибка, обертку в $timeout