Javascript AngularJS$scope不从视图中查看更改_Javascript_Angularjs_Binding_Controller_Watch

Javascript AngularJS$scope不从视图中查看更改

javascript angularjs binding

Javascript AngularJS$scope不从视图中查看更改,javascript,angularjs,binding,controller,watch,Javascript,Angularjs,Binding,Controller,Watch,我有一个小示例，我希望在浏览器控制台中看到日志消息，表明$scope watcher工作正常，但不幸的是事实并非如此 <!doctype html> <html ng-app="demo"> <head> <script src="bower_components/angular/angular.js"></script> <script> var app = angular.module('dem

我有一个小示例，我希望在浏览器控制台中看到日志消息，表明$scope watcher工作正常，但不幸的是事实并非如此

<!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>


var app=angular.module（'demo'，['ng']）；
应用程序控制器（'demoCtrl'，函数（$scope）{
var self=这个；
self.searchText=''；
$scope.$watch（'self.searchText'，函数（n，p）{
log（'searchText从'n'更改为'p'）；
});
});

将您的

$watch

更改为：

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

在

$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>


var app=angular.module（'demo'，['ng']）；
应用程序控制器（'demoCtrl'，函数（$scope）{
var self=这个；
$scope.searchText=''；
$scope.$watch（'searchText'，函数（n，p）{
log（'searchText从'n'更改为'p'）；
});
});

或者使用另一个表单并按如下方式更改代码：

<!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>


var app=angular.module（'demo'，['ng']）；
应用程序控制器（'demoCtrl'，函数（$scope）{
var self=这个；
self.searchText=''；
$scope.$watch（函数（）{return self.searchText；}，函数（n，p）{
log（'searchText从'n'更改为'p'）；
});
});

您需要在

$scope.$watch（…）

中使用别名

ctrl

（而不是

self

）：


var app=angular.module（'demo'，['ng']）；
应用程序控制器（'demoCtrl'，函数（$scope）{
var self=这个；
self.searchText=''；
$scope.$watch（'ctrl.searchText'，函数（n，p）{
log（'searchText从'n'更改为'p'）；
});
});

当使用

ng controller=“demoCtrl as ctrl”

时，Angular会创建一个指向控制器上下文对象的链接

此

进入作用域：

$scope.ctrl

答案很简单-

Angular监视范围变量上的表达式，而不是控制器实例上的表达式

要使代码正常工作，您需要按照以下步骤修改控制器代码

var self = this;

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

如果您观察分配给

$scope

的变量，您可以使用字符串表示法，但如果它不是分配给

$scope

的变量，则必须使用函数。我理解。但是把它放在你的答案里。对于未来的访问者来说，这将是一个更好的答案。现在我明白了，所以这里的文档在谈论观看局部变量时可能是不完整的

vm

：@G.Ghez同意，这有点让人困惑。顺便说一句，正如我在前面的问题中所说的（但为了维护这里的提要知识），视图和控制器在这里都有一个变量名的协议，它在它们之间创建了一个硬链接。我不太喜欢这个…。@G.Ghez这更像是个人喜好。我使用

controller as

语法。“controller as”构建允许自动将控制器实例附加到作用域。见：

var self = this;

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