AngularJS $ scope не просматривает изменения из View

У меня есть эта небольшая выборка, в которой я надеялся увидеть сообщения журнала в консоли браузера, указывающие, что наблюдатель с областью видимости работает хорошо, но, к сожалению, это не так.

<!doctype html> 
<html ng-app="demo"> 

<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script> 
    var app = angular.module('demo', ['ng']); 
    app.controller('demoCtrl', function($scope) { 
     var self = this; 

     self.searchText = ''; 
     $scope.$watch('self.searchText', function(n, p) { 
      console.log('searchText changed from', n, 'to', p); 
     }); 

    }); 
    </script> 
</head> 

<body ng-controller="demoCtrl as ctrl"> 
    <input type="text" ng-model="ctrl.searchText" /> 
</body> 

</html>

источник

2016-02-18 G. Ghez

Вы должны использовать псевдоним ctrl (не self) в $scope.$watch(...):

<!doctype html> 
<html ng-app="demo"> 

<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script> 
    var app = angular.module('demo', ['ng']); 
    app.controller('demoCtrl', function($scope) { 
     var self = this; 

     self.searchText = ''; 
     $scope.$watch('ctrl.searchText', function(n, p) { 
      console.log('searchText changed from', n, 'to', p); 
     }); 

    }); 
    </script> 
</head> 

<body ng-controller="demoCtrl as ctrl"> 
    <input type="text" ng-model="ctrl.searchText" /> 
</body> 

</html>

При использовании ng-controller="demoCtrl as ctrl" Угловой создает ссылку на объект контекста контроллера this в объем: $scope.ctrl.

источник

2016-02-18 14:30:41

Теперь я понимаю, поэтому документация здесь может быть неполной, когда речь идет о просмотре локальной переменной 'vm': https://github.com/johnpapa/angular-styleguide#controlleras-with-vm –

@ G.Ghez Согласен, это немного сбивает с толку. –

Кстати, как я уже говорил в предыдущем вопросе (но для того, чтобы поддерживать здесь знание корма), оба представления и контроллер имеют соглашение о имени переменной здесь, которое создает жесткую связь между ними. Я не такой фанат этого ... –

Меняйте $watch на: смотреть выражение

$scope.$watch(function() { 
    return self.searchText; 
    }, function(n, p) { 
    console.log('searchText changed from', n, 'to', p); 
    });

источник

2016-02-18 14:25:30 Niezborala

Объясните * почему * это решает все. –

Если вы заметили переменную, назначенную '$ scope', вы можете использовать нотацию строки, но если она не является переменной, которая не присваивается' $ scope', вам нужно использовать функцию. – Niezborala

Я понимаю. Но поставьте * в свой ответ *. что сделает его гораздо лучшим ответом для будущих посетителей. –

В form you used$scope.$watch должны быть частью сферы или корневой области. Таким образом, вы должны изменить свой код так:

<!doctype html> 
<html ng-app="demo"> 

<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script> 
    var app = angular.module('demo', ['ng']); 
    app.controller('demoCtrl', function($scope) { 
     var self = this; 

     $scope.searchText = ''; 
     $scope.$watch('searchText', function(n, p) { 
      console.log('searchText changed from', n, 'to', p); 
     }); 

    }); 
    </script> 
</head> 

<body ng-controller="demoCtrl as ctrl"> 
    <input type="text" ng-model="searchText" /> 
</body> 

</html>

или использовать другую форму и изменить ваш код, как это:

<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script> 
    var app = angular.module('demo', ['ng']); 
    app.controller('demoCtrl', function($scope) { 
     var self = this; 

     self.searchText = ''; 
     $scope.$watch(function() { return self.searchText; }, function(n, p) { 
      console.log('searchText changed from', n, 'to', p); 
     }); 

    }); 
    </script> 
</head> 

<body ng-controller="demoCtrl as ctrl"> 
    <input type="text" ng-model="ctrl.searchText" /> 
</body> 

</html>

источник

2016-02-18 14:25:46

Ответ прост -

Угловые наблюдает выражение переменного объема и не на экземпляре контроллера.

Чтобы сделать код работу, которую нужно сделать, изменить код контроллера следующим

var self = this; 

self.searchText = ''; 
$scope.self = this; 
$scope.$watch('self.searchText', function(n, p) { 
console.log('searchText changed from', n, 'to', p); 
});

источник

2016-02-18 14:43:41

«controller as» build позволяет автоматически присоединять экземпляр контроллера к области видимости. См. Https://github.com/johnpapa/angular-styleguide#controlleras-with-vm –

Правда. Просто дал обходное решение для использования «я». –

AngularJS $ scope не просматривает изменения из View

ответ

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