Javascript 在控制器中使用'this'作用域时使用$scope.$watch

我的Angular应用程序中有一个控制器：

(function (angular) {
    function MyController() {
        this.name = 'Dave';

        // I want to have code like this:
        /*
          $scope.$watch('name', function (newValue, oldValue) {
              console.log(oldValue, "changed to", newValue);
          });
        */
    }

    window.myApp = angular.module('myApp', [])
        .controller('MyController', [MyController]);
})(angular);

在将值附加到

MyController

原型时，是否有方法使用

$scope.$watch

的功能

我确实注意到，在我的代码中，如果我添加类似于

ng controller=“MyController as myCtrl”

，并将我的

$scope.$watch

语句更改为

$scope.$watch（'myCtrl.name'，…）

，则在添加

$scope

依赖项后，它会起作用，但这感觉像是将我的控制器绑定到我的视图上，感觉不对

编辑

试图澄清我的问题。我的HTML是这样的：

<div ng-app="myApp">
  <div ng-controller="MyController as myCtrl">
    <input type="text" ng-model="myCtrl.name" />
    <p>{{myCtrl.helloMessage}}</p>
  </div>
</div>

angular.module('myApp', [])
  .controller('MyController', ['$scope', function ($scope) {
    this.name = 'World';
    this.helloMessage = "Hello, " + this.name;

    var self = this;
    $scope.$watch('myCtrl.name', function () {
      self.helloMessage = "Hello, " + self.name;
    });
  }]);

这目前是可行的，但正如您所看到的，在

$watch

调用中，我必须通过视图中的

controllerAs

名称引用我的控制器，这不太理想

---

我在

上设置了一个示例，我可能错了，但我相信$scope是由angular自动注入的

下面是一个声明控制器的示例：

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
      $scope.greeting = 'Hola!';
}]);

请注意，$scope依赖项是如何声明的

“$scope”

和注入的

函数（$scope）

换句话说，你的应该是这样的吗

function MyController($scope) {}

window.myApp = angular.module('myApp', [])
        .controller('MyController', ['$scope', MyController($scope)]);

<div ng-app="myApp">
  <div ng-controller="MyController">
    <input type="text" ng-model="name" />
    <p>{{helloMessage}}</p>
  </div>
</div>

angular.module('myApp', [])
  .controller('MyController', ['$scope', function ($scope) {
    this.name = 'World';
    this.helloMessage = "Hello, " + this.name;

    var self = this;
    $scope.$watch('name', function () {
      self.helloMessage = "Hello, " + self.name;
    });
  }])

编辑：

我现在明白了。我从来没有必要使用“控制器作为”，但为什么不这样做呢

function MyController($scope) {}

window.myApp = angular.module('myApp', [])
        .controller('MyController', ['$scope', MyController($scope)]);

<div ng-app="myApp">
  <div ng-controller="MyController">
    <input type="text" ng-model="name" />
    <p>{{helloMessage}}</p>
  </div>
</div>

angular.module('myApp', [])
  .controller('MyController', ['$scope', function ($scope) {
    this.name = 'World';
    this.helloMessage = "Hello, " + this.name;

    var self = this;
    $scope.$watch('name', function () {
      self.helloMessage = "Hello, " + self.name;
    });
  }])

{{helloMessage}}

angular.module（'myApp'，[]）
.controller（'MyController'，['$scope'，函数（$scope）{
this.name='World'；
this.hellomemessage=“你好，”+this.name；
var self=这个；
$scope.$watch（'name'，function（）{
self.hellomemessage=“你好，”+self.name；
});
}])

您可以在手表中使用

angular.bind

来避免绑定到视图，即

$scope.$watch(angular.bind(this, function () {
    self.helloMessage = "Hello, " + self.name;
}));

$watch 在每个$digest循环中计算的表达式。返回值的更改会触发对侦听器的调用。Watch表达式可以是sting或函数

• 字符串：作为表达式计算
• 函数（作用域）：以当前作用域作为参数调用

例子

angular.module（'app'，[]）.controller（'MainCtrl'，function（$scope）{
this.name='World'
this.helloMsg=''
$scope.$watch（函数（）{
返回此名称
}.bind（this）、函数（newName）{
this.helloMsg=“你好，”+newName
}.绑定（本）
});

{{ctrl.helloMsg}
是的，我知道我可以使用
$scope
依赖项来保存我的值，但我希望有一种方法仍然能够在我的视图中使用controllerAs样式的方法，这似乎是在使用
$scope
时无法做到的。我确实不确定您的“方式”，但底线是，$scope必须声明和注入。我在上面添加了进一步的解释和示例。将值存储在控制器实例而不是scope上有什么好处？谢谢。出于某种原因，我认为在使用
$scope
时，不能使用
这个
作用域变量。