Question

我的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);

在将值附加到$scope.$watch原型时，有没有办法使用MyController的功能？

我注意到在我的代码中，如果我添加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

上设置了一个示例

Answer 1

$手表

在每个$ digest周期计算的表达式。返回值的更改会触发对侦听器的调用。观察表达可以是一种刺痛或功能。


string：评估为表达式

function（scope）：以当前范围作为参数调用。

例如

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>

Answer 2

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

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

https://docs.angularjs.org/api/ng/function/angular.bind

Answer 3

我可能错了，但我相信$ scope会自动注入角度。

以下是声明控制器的示例：

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)]);

编辑：

我现在明白了。我从来没有必要使用＆＃34;控制器作为＆＃34;但为什么不这样做？

<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;
    });
  }])

在控制器中使用`this`范围时使用$ scope。$ watch

3 个答案:

$手表

例如