Я борюсь с концепцией this
в угловой. Я читал различия, которые были очень хорошо объяснены в "этой" и "$ -области" в контроллерах AngularJS, но у меня все еще возникает вопрос, полезно ли это во многих случаях вообще.
Я создал контроллер и this.the_value
var
angular.module("TheApp", [])
.controller("TheCtrl", ["$scope", function($scope){
this.the_value = "Init value";
}]);
Теперь мне нравится концепция здесь, так как я могу написать ng-controller="TheCtrl as myCtrl"
и указать значение в представлении myCtrl.the_value
. Я разделяю контексты при работе с вложенными контроллерами, это прекрасно.
Затем я понял, что мне нужно посмотреть эту переменную через $scope.$watch
.
Теперь я либо должен переписать весь мой код представления, а вместо this
переместить значение_значения в $scope
чтобы я мог использовать
$scope.$watch("the_value", function(newValue, old ){
console.log("The old value: '"+old+"', the new value: '"+newValue+"'");
});
или сделать некоторые неприятные вещи, как
$scope.$watch("myCtrl.the_value", function(newValue, old ){
console.log("This: The old value: '"+old+"', the new value: '"+newValue+"'");
});
который является злом, поскольку я создаю зависимость от моего псевдонима представления имени контроллера. Если я реорганизую псевдоним вида, это сломается. (Даже модульное тестирование будет загрязнено этой зависимостью)
Имеет ли this
очень ограниченное использование, или я получаю что-то неправильно? Везде, где я начал использовать this
превратился в $scope
когда добавлял новое поведение в код.
Если вы используете это, вы можете наблюдать переменные первого уровня, передавая функцию в качестве первого параметра в $ scope. $ Watch
$scope.watch(
function() {
return this.the_value; //this is the real variable to be watched
}.bind(this), //binding allows to use 'this' inside function
function(newVal, oldVal) {
console.log(newVal, oldVal); //this is the callback
}
);
Легким решением для этого является просмотр функции, которая возвращает наблюдаемую переменную.
Обтекание переменной позволит вам использовать это и не требует использования псевдонима контроллера.
$scope.$watch(function() {
return that.the_value
}, function(newValue, old) {
console.log("This: The old value: '" + old + "', the new value: '" + newValue + "'");
});