控制器作为语法问题答案

【问题标题】：Controller as syntax issues控制器作为语法问题
【发布时间】：2016-01-25 11:19:26
【问题描述】：

我正在尝试使用Controller as 语法，但我无法让它工作。

例如，这是一个工作代码：

查看：

<div ng-controller="ProjectsController">
  Projects view : <br />
  {{ projectsData }}
</div>

控制器：

angular.module('app')
  .controller('ProjectsController', function($scope, Projects) {
    Projects.get().then(function(result) {
      $scope.projectsData = result.data;
    });
  });

这里是项目工厂：

angular.module('app')
  .factory('Projects', function($http) {
    return {
      get: function() {
        return $http.get('http://localhost:8000/api/catalog/projects');
      }
    };
  });

这种方式是可行的，使用控制器的正常语法和其中的$scope 对象。

但是当我使用 Controller as 语法时，我无法让它工作，如下所示：

查看：

<div ng-controller="ProjectsController as p">
  Projects view : <br />
  {{ p.projectsData }}
</div>

对于我尝试过的控制器：

angular.module('app')
  .controller('ProjectsController', function(Projects) {
    Projects.get().then(function(result) {
      this.projectsData = result.data;
    });
  });

还有：

angular.module('app')
  .controller('ProjectsController', function($scope, Projects) {
    Projects.get().then(function(result) {
      $scope.projectsData = result.data;
    });
    this.projectsData = $scope.projectsData;
  });

但这些都不起作用，{{ projectsData }} 的视图中没有任何内容。

但是，当我尝试使用 Controller as 语法将其作为控制器进行测试时：

angular.module('app')
  .controller('ProjectsController', function($scope, Projects) {
    Projects.get().then(function(result) {
      $scope.projectsData = result.data;
    });
    console.log($scope.projectsData);
    this.projectsData = "TEST";
  });

我的“TEST”显示在视图中，$scope.projectsData 是 undefined。

那么如何设置我的控制器以便使用Controller as 语法正确访问它？

【问题讨论】：

this 不是你所期望的，它是传递给then() 的函数的上下文。像var self = this; 一样存储this 控制器并使用它。或者使用angular.bind 将函数绑定到控制器上下文。 stackoverflow.com/questions/8813871/…

标签： javascript html angularjs model-view-controller controller

【解决方案1】：

问题是您需要在控制器中存储this 的引用。

当您尝试在回调中使用 this 时，它具有不同的上下文

angular.module('app')
  .controller('ProjectsController', function(Projects) {
    var vm = this;
    Projects.get().then(function(result) {
      vm.projectsData = result.data;
    });
  });

【讨论】：