aggiungi watch su una variabile non scope in angularjs

Question

C'è un modo per aggiungere watch a una variabile non scope. Voglio aggiungere un orologio alla variabile locale. Ho qualcosa di simile

function EditAssetRegistryController(assetregistryService, manufacturerService, assettypeService, projectService, $localStorage, $routeParams) { 
     var vm = this; 
     vm.manufacturers = []; 
     vm.projects = []; 
     vm.asset_types = []; 
     vm.ch_group_uniq = 'none'; 
} 

qui c'è un modo per aggiungere watch a vm.ch_group_uniq? So come sarà fatto con la variabile scope ma ho degli scenari in cui devo controllare molte variabili complesse.

Answer 1

$watch non funziona come la sintassi normale con controllerAs. È necessario associarlo al $scope, e allora si può guardare quella variabile:

Codice

$scope.$watch(angular.bind(this, function (ch_group_uniq) { 
    return this.ch_group_uniq; 
}), function (newVal, oldVal) { 
    console.log('Name changed to ' + newVal); 
}); 

Ecco il riferimento Todd Motto Article

Answer 2

Beh, è ​​possibile aggiungere facilmente un orologio per nulla passando una funzione come primo parametro:

$scope.$watch(function watchFunction(scope) { 
    return vm.ch_group_uniq 
}, handler) 

Un paio di cose da considerare: watchFunction deve tornare lo stesso valore se nulla è cambiato . Ciò può portare ad alcuni trucchi, ad esempio, restituendo il risultato di alcune operazioni dell'array: [1,2,3].filter(...) restituirà sempre un nuovo array e porterà a un ciclo infinito $digest. Si noti inoltre il terzo parametro di $scope.$watch, che indica se utilizzare un confronto di identità o angular.equals quando si confrontano i valori. (Consultare i documenti per ulteriori informazioni - https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch)

Tuttavia, il problema specifico sembra essere quello di provare a utilizzare controllerAs e personalizzato $watch -es. Esiste una libreria molto utile che risolve specificamente questo problema: https://github.com/christopherthielen/angular-360-no-scope

Answer 3

Una sintassi più pulita utilizzando ES6

$scope.$watch(() => { 
    return this.thingToWatch; 
}, (newVal, oldVal) => { 
    // Your code here... 
});