$watch 未检测到服务变量的变化

Question

我是 angularjs 的新手，我遇到了一个奇怪的问题，即 $watch 不会在服务中的变量更改时触发。不知道哪里搞错了

script.js 文件:

var app = angular.module("app", []);
app.factory("loggedInUser", [loggedInUser]);

function loggedInUser() {
  var currentLoggedInUser = undefined;
  setTimeout(function() {
    currentLoggedInUser = "Karthik";
    console.log("Updated user name");
  }, 3000);
  return {
    getLoggedInUser: function() {
      return currentLoggedInUser;
    }
  };
}

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);

function ctrl($scope, loggedInUser) {
  var vm = this;
  $scope.$watch(function() {
    return loggedInUser.getLoggedInUser();
  }, function() {
    vm.loggedInUserName = loggedInUser.getLoggedInUser();
    console.log("Inside Watch");
  },true);
}

HTML:

<html>

  <head>
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js" data-require="angularjs@1.5.8" data-semver="1.5.8"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <h1 ng-controller="ctrl as vm">
      Hello <span ng-bind="vm.loggedInUserName"></span>
    </h1>
  </body>

</html>

Answer 1

使用 $timeout 而不是 setTimeout ？ .. 因为它需要 $scope.$apply（在 angular 事件之外）.. $timeout 是 setTimeout 的 angular 包装 .. 类似于：

 // Code goes here

var app = angular.module("app", []);
app.factory("loggedInUser", ["$timeout", loggedInUser]);

function loggedInUser($timeout) {
  var currentLoggedInUser;
   $timeout(function() {
    currentLoggedInUser = "Karthik";
    console.log("Updated user name");
  }, 3000);
  return {
    getLoggedInUser: function() {

      return currentLoggedInUser;
    }
  };
}

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);

function ctrl($scope, loggedInUser) {
  var vm = this;
  $scope.$watch(function() {
    return loggedInUser.getLoggedInUser();
  }, function() {
    vm.loggedInUserName = loggedInUser.getLoggedInUser();
    console.log("Inside Watch");
  },true);
}

但是 .. 如果您想改用 SetTimeout 函数：

  // Code goes here

var app = angular.module("app", []);
app.factory("loggedInUser", ["$rootScope",loggedInUser]);

function loggedInUser($rootScope) {
  var currentLoggedInUser = undefined;
  setTimeout(function() {
    $rootScope.$apply(function(){
    currentLoggedInUser = "Karthik";
    console.log("Updated user name");
    });
  }, 3000);
  return {
    getLoggedInUser: function() {
      return currentLoggedInUser;
    }
  };
}

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);

function ctrl($scope, loggedInUser) {
  var vm = this;
  $scope.$watch(function() {
    return loggedInUser.getLoggedInUser();
  }, function() {
    vm.loggedInUserName = loggedInUser.getLoggedInUser();
    console.log("Inside Watch");
  },true);
}

$watch 未检测到服务变量的变化

$watch not detecting changes in service variable

angularjs

angularjs-service