$ watch не обнаруживает изменения в служебной переменной

Я новичок в angularjs, и я столкнулся с этой странной проблемой, когда $ watch не стреляет с изменением переменной в сервисе. Я не знаю, где я ошибся.

Plunkr: Link to Plunkr

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="[email protected]" 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>

источник

2017-01-18 Karthik

Что вы смотрите? Вы должны дать ему переменную, чтобы на самом деле наблюдать ... Т.е., $ scope. $ Watch ('some.variable', (old-val, new-val) => {do_something();} – rrd

@rrd Я смотрю для изменений в переменной 'currentLoggedInUser'. – Karthik

Я только недавно ответил на такой вопрос, здесь http://stackoverflow.com/a/41693955/1061668 –

использование $ таймаут вместо SetTimeout? . .. потому что нужен $ объем $ применяется (за пределами углового события) .. $ таймаута является угловой упаковкой для SetTimeout .. что-то вроде:

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

источник

2017-01-18 13:11:13

Это работает! Не могли бы вы объяснить, почему работает $ timeout ? – Karthik

Я объясняю это в описании ... потому что SetTimeout является событием javascript (вне углового) .. так что ему нужно $ scope. $ Apply() работает ... но $ timeout уже является SetTimeout с $ scope. $ apply() применяется .. это обертка –

вы можете показать, как использовать setTimeout и $ scope. $ apply ins чад использования $ timeout? – Karthik

$ watch не обнаруживает изменения в служебной переменной

ответ

Смежные вопросы