2015-11-18 3 views
1

Попытка выяснить, почему, когда консоль сообщает мне одну вещь, но вывод углов в html говорит мне другой.Угловая - почему область не обновляется внутри этой функции

Код

angular.module('global',[]); 

angular.module('global').controller('thisTestController', thisTestController); 
function thisTestController() { 
    var tc = this; 
    tc.status = "not loaded"; 

    function activate() { 

    var background = new Image(); 
    background.onload = function() { 
     tc.status = "loaded"; 
     console.log(tc.status); 
    }; 
    background.src = 'http://placehold.it/350x150'; 

    } 

    activate(); 

} 

HTML

<body ng-app="global"> 
    <div ng-controller="thisTestController as tc">Status = {{tc.status}}</div> 
    </body> 

Результат

Console.log - loaded 
HTML - Status = not loaded 

http://plnkr.co/edit/wxja7smqOJiSbUi7mfu4?p=preview

+0

Возможные дублировать [Обратный вызов службы Angularjs для обновления sco pe контроллера] (http://stackoverflow.com/questions/18931689/angularjs-service-callback-to-update-scope-of-controller) – Brian

+0

читать о '$ digest' http://www.sitepoint.com/ help-angle-apply-digest/ – Namek

+0

для запуска безопасности $ digest, вы можете использовать '$ timeout' http://plnkr.co/edit/ZRDCroSxPLWHKd6YjHVC?p=preview – jan

ответ

1

Вы должны использовать $scope и $scope.$apply для обновления значений после визуализации контекста. tc (this) не имеет контекста в жизненном цикле контроллера. Другими словами, ваше назначение tc действительно является самой функцией. Не связанный контекст для контроллера.

У меня есть раздвоенная версия вашего plnkr с простым примером, чтобы заставить его работать.

http://plnkr.co/edit/fghSbSsarBbM0zv5EzoB?p=preview

Docs для $scope и $apply можно найти здесь:

angular docs

3

Вы должны связать контроллер с $ сферы, как это: http://plnkr.co/edit/CV7rgBGQMnRlNDnYSQIq?p=preview

angular.module('global', []); 

angular.module('global').controller('thisTestController', thisTestController); 

function thisTestController($scope) { 
    var tc = this; 
    tc.status = "not loaded"; 

    function activate() { 

    var background = new Image(); 
    background.onload = function() { 
     tc.status = "loaded"; 
     $scope.$apply(); 
     console.log(tc.status); 
    }; 
    background.src = 'http://placehold.it/350x150'; 

    } 

    activate(); 

} 
+0

Неплохая практика использования' $ apply() 'без аргумента функции, потому что за кулисами они завершают функцию в' try, catch' и, в свою очередь, передают ее в службу $ exceptionHandler. Кроме того, вы всегда должны иметь $ apply в тайм-ауте из-за конфликтов, если что-то еще обновляется. – technicallyjosh

Смежные вопросы