我的服务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;
});
在某些页面上从ui-router接收值：
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,true);
}
};
}])
但是,范围.$watch似乎不起作用.这是我的日志：
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
我究竟做错了什么？
解决方法
你的第一个错误在范围内.$watch()第一个参数：它是在给定范围内计算的表达式(字符串),或者是返回值的函数;存储该值,并在每个摘要周期运行该函数;如果新值不同,则触发侦听器(第二个参数).
所以第一次修正是：
scope.$watch(function() {
return NavData.depth,},.../*other arguments,see below*/);
现在第二个论点也是错的！它应该是一个函数,你提供函数的返回值(顺便说一下,doStuff是未定义的).第二个参数函数接收新值(由上面第一个参数返回),旧值和范围.在您的情况下,您不关心新/旧值.所以完整的解决方案应该是：
scope.$watch(function() { // decide the watched value
return NavData.depth,function() { // what to do when the value changes
// do stuff and reference NavData normally
});
