Задача простая - получить данные с сервера и отобразить их в виде таблицы и графика(D3). С запросом и таблицей никаких проблем. А вот график я решил запихнуть в отдельную директиву, но никак не могу добиться корректного срабатывания $watch для изменения переменной из $scope.
HTML
<graph></graph>
shcema.js
angular.module('schema', ['mui', 'network', 'errors'])
.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled : true,
requireBase: false
});
})
.controller('schema', [
'$scope', 'api', '$location', 'error',
function ($scope, api, $location, error) {
$scope.data = {};
api.request('getSystemTree', {ci: $location.search().ci})
.subscribe(function (d) {
$scope.data = d;
$scope.$apply();
console.log(d) // Запрос отрабатывает, данные приходят
});
$scope.goToSm = function (ci) {window.open(api.smURI(ci));};
$scope.getError = error.description;
}])
.directive('graph', function () {
return {
restrict: 'E',
scope : false,
link : function (scope, element, attrs) {
// Наблюдатель отрабатывает 1 раз и выводит Object {} undefined undefined
scope.$watch(scope.data, function (n, o) {console.log(scope.data, o, n);})
}
}
});
Гуглинг запутал меня окончательно. Объясните, что я делаю не так? Может вообще по другому надо?
scope.$watch('data",function(){...})
илиscope.$watch(function(){ return scope.data;}, function(){...})
scope.$watch("data", function (n, o) {console.log(scope.data);})
помогло. Спасибо огромное. Оформите как ответ, дабы плюсануть и принять можно было.