Почему Angular не обновляется с областью действия здесь?

Question

Я довольно новичок в Angular, и я использую firebase в качестве моего backend. Я надеялся, что кто-то сможет отладить эту проблему. Когда я впервые перехожу на свою страницу www.mywebsite.com/#defaultHash данные не загружаются в DOM, это происходит после посещения другой ссылки хэша и возврата назад.

Мой контроллер выглядит так:.

/* initialize data */ 

var fb = new Firebase('https://asdf.firebaseio.com/'); 

/* set data to automatically update on change */ 

fb.on('value', function(snapshot) { 

    var data = snapshot.val(); 
    $scope.propertyConfiguration = data.products; 
    console.log($scope.propertyConfiguration); 
    console.log("Data retrieved"); 

}); 

/* save data on button submit */ 

$scope.saveConfigs = function(){ 

    var setFBref = new Firebase('https://asdf.firebaseio.com/products'); 
    setFBref.update($scope.propertyConfiguration); 
    console.log("configurations saved!"); 

}; 

Я 3 хеширования маршруты говорят, "Общий", "Регистрация" и "Home" с otherwise.redirectTo, установленным в "Shared" (все они используют этот (все «ссылки» являются href = «# hashWhereever»)

1) Перейти на страницу website.com/#Shared или просто обновить. Журналы консоли $ scope.propertyConfiguration и «Data Retrieved». DOM ничего не показывает.

2) Нажмите, чтобы Website.com/#Registration, консольные журналы корректно обрабатывают данные области, DOM загружается правильно.

3) Нажмите обратно на website.com/#Shared, консоль журнала правильно отображает данные области, но на этот раз DOM загружается правильно.

4) Обновление в настоящее время правильно загружено сайт.com/#Shared. Элементы DOM исчезают.

Поскольку параметр $ scope.data верен во всех случаях здесь, не должен Угловой убедиться, что DOM правильно отражает модель? Почему DOM загружается правильно, только когда я нажимаю на страницу из другой ссылки.

Я могу «исправить» его, добавив window.location.hash = «Shared», но он выдает огромное количество ошибок в консоли.

СТАЦИОНАРНАЯ:. (Сорт)

Функции $ $ Объем применить() заставляет вид для синхронизации с моделью. Я бы ответил на этот вопрос сам и закрою его, но мне все еще интересно, почему представление неправильно загружается, когда я правильно присваиваю значение $ scope. Если «грязная проверка» «Угловая» проверяет, когда появилась возможность изменения модели, не присваивает значение переменной $ scope overqualify?

Answer 1

Угловое не имеет способа узнать, что вы присвоили значение переменной $ scope.variable. Здесь нет никакой магии. Когда вы запускаете директиву (ng-click/ng-submit) или угловые внутренние функции, все они вызывают $ apply() и запускают дайджест (проверка грязных флагов и процедура обновления).

Возможно, более безопасный подход, чем $ apply, заключается в использовании $ timeout. В настоящее время, если вы вызываете операцию записи в Firebase, она может синхронно запускать прослушиватель событий (child_added, child_changed, value и т. Д.). Это может привести к тому, что вы вызовете $ apply, пока находитесь в пределах области $ apply. Если вы это сделаете, появится ошибка. $ timeout обходит это.

См. this SO Question для получения дополнительной информации по теме дайджеста и $ timeout.

This doc in the Angular Developer Guide covers how compile works; очень хороший фон для любого серьезного Углового разработчика.

Кроме того, вы можете сэкономить немало энергии, используя official Firebase bindings for Angular, который уже учитывает все эти детали реализации.

Vaguely Related Note: В недалеком будущем Angular сможет использовать Object.observe magic для обработки этих обновлений.