Angularjs Angular指令未拾取服务数据

我的服务导航数据

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路由器接收值：

  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);
      }

    };
  }])

然而，scope.$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
});

假设
NavData
仅通过
ui路由器
oneter
回调进行更改，您可能会跳过整个
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
        });
      }
    };
  }])

简化版。
您是否尝试过$watch scope.deth而不是工厂？我只是尝试过，但没有区别。（并非我所期望的：为什么？）！出于某种原因，我不知道你可以将一个函数作为第一个参数传递。我用这种方式设置了我自己的指令，但是观察者只被调用一次<代码>范围.$watch（）->返回myFactory.aVariable，（）->console.log myFactory.aVariable