使用美元的范围.$watch在控制器中使用' this '作用域时

Using $scope.$watch when using `this` scope in controller

本文关键字：this 作用域 美元 范围 watch 控制器      更新时间：2023-09-26

在我的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名称引用我的控制器，这是不理想的。

我已经设置了一个关于Plunkr的例子

$watch

在每个$digest循环上求值的表达式。返回值的更改会触发对侦听器的调用。Watch表达式可以是一个字符串或函数。

  • 字符串:计算为表达式
  • 函数(作用域):以当前作用域作为参数调用。

angular.module('app', []).controller('MainCtrl', function($scope) {
  this.name = 'World'
  this.helloMsg = ''
  
  $scope.$watch(function() {
    return this.name
  }.bind(this), function(newName) {
    this.helloMsg = "Hello, " + newName
  }.bind(this))
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='MainCtrl as ctrl'>
    <input type='text' ng-model='ctrl.name' />
    {{ ctrl.helloMsg }}
  </div>
</div>

您可以通过在手表中使用angular.bind来避免绑定到视图，即

$scope.$watch(angular.bind(this, function () {
    self.helloMessage = "Hello, " + self.name;
}));
https://docs.angularjs.org/api/ng/function/angular.bind

我可能错了，但我相信$作用域是由angular自动注入的。

下面是一个声明控制器的例子:

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

注意$scope依赖是如何声明'$scope'和注入function($scope)的

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

function MyController($scope) {}
window.myApp = angular.module('myApp', [])
        .controller('MyController', ['$scope', MyController($scope)]);
编辑:

我现在明白了。我从来没有需要使用"controller as"，但为什么不这样做呢?

<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;
    });
  }])
相关文章：