Question

我尝试使用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;
    });
  });

这是Projects工厂：

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

我有我的＆＃34; TEST＆＃34;显示在视图中，$scope.projectsData为undefined。

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

Answer 1

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

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

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

控制器作为语法问题

1 个答案: