Угловая директива не подбирая данные службы

Question

Моей службы NavData

angular.module('navData', []). 
    factory('NavData', function() { 
     var navData = {}; 
     navData.depth = 0; 
     navData.category_id = ""; 
     navData.category_name = ""; 
     navData.subcategory_id = ""; 
     navData.subcategory_name = ""; 
     return navData; 
    }); 

принимает значение от УИ-маршрутизатора на некоторых страницах:

var category = { 
    name: 'category', 
    parent: site, 
    url: '/categories/:category_id', 
    onEnter: function(NavData, $stateParams){ 
     NavData.depth = 1; 
     NavData.category_id = $stateParams.category_id; 
     console.log(NavData);   
    }, 
    views: { 
     'navigation': { 
     templateUrl: 'partials/category-menu.html' 
     }, 
     'content': { 
     templateUrl: 'partials/category-images.html' 
     } 
    } 
    }; 

директивы, на всех страницах, должен следить за изменения услугу и отразить их в пользовательской функции панировки:

.directive('breadcrumb', ['NavData', function(NavData){ 
    return { 
     templateUrl: 'partials/breadcrumb.html', 
     link: function(scope, elm, attrs, ctrl){ 
     scope.depth   = NavData.depth; 
     scope.category_id  = NavData.category_id; 
     scope.category_name = NavData.category_name; 
     scope.subcategory_name = NavData.subcategory_name; 

     var doStuff = function(navdata){ 
      console.log("watching depth: " + navdata.depth); 
      console.log("watching cat_id: "+ navdata.category_id); 
     }; 
     scope.$watch(NavData.depth, doStuff(NavData), true); 
     scope.$watch(NavData.category_id, doStuff(NavData), true); 
     } 

    }; 
    }]) 

Однако объем. $ watch кажется n от работы. Это мой лог:

watching depth: 0 directives.js:28 
watching cat_id: directives.js:29 
watching depth: 0 directives.js:28 
watching cat_id: directives.js:29 
Object {depth: 1, category_id: "1", category_name: "", subcategory_id: "", subcategory_name: ""} app.js:25 

Что я делаю неправильно?

Answer 1

Ваша первая ошибка находится в scope.$watch() 1-й аргумент: это либо выражение (строка), которое оценивается в заданном scope, либо функция, возвращающая значение; значение сохраняется и функция запускается в каждом цикле дайджеста; если новое значение отличается, слушатель (второй аргумент) запускается.

Так первая поправка:

scope.$watch(function() { 
    return NavData.depth, 
}, .../*other arguments, see below*/); 

Теперь второй аргумент не так, как хорошо! Ожидается, что функция , вы предоставляете возвращаемое значение функции (что, кстати, не определено для doStuff). Эта функция 2-го аргумента получает новое значение (которое возвращается первым аргументом выше), старое значение и область действия. В вашем случае вы не заботитесь о новом/старом значении. Таким образом, полное решение должно быть:

scope.$watch(function() { // decide the watched value 
    return NavData.depth, 
}, function() { // what to do when the value changes 
    // do stuff and reference NavData normally 
}); 

Answer 2

Предполагая NavData только изменения от ui-routeronEnter обратных вызовов, вы могли бы пропустить весь NavData объект и $watch реализации.

Просто транслировать событие на каждом onEnter обратного вызова:

onEnter: function($rootScope, $stateParams){ 
    $rootScope.$broadcast("NavDataChanged", { 
     depth: 1, 
     category_id: $stateParams.category_id 
     /* (any other former NavData properties) */ 
    }); 
} 

И ваша директива стала бы:

.directive('breadcrumb', [function(){ 
    return { 
     templateUrl: 'partials/breadcrumb.html', 
     link: function(scope, elm, attrs, ctrl){ 
     scope.$on("NavDataChanged", function(event, navData) { 
      scope.depth = navData.depth; 
      scope.category_id = navData.category_id; 
      // any other former NavData properties and doStuff code 
     }); 
     } 
    }; 
    }]) 

Упрощенная версия here.