Javascript 为什么$scope在Angular 1.6.1中不起作用？ 背景

在阅读了一些StackOverflow问题之后，我决定开始使用

$scope

，以避免必须定义

var self=this的麻烦变量

问题
问题是，
$scope
似乎没有绑定任何东西，当我使用它时，任何东西都不起作用。我不知道为什么，但如果我使用
var self=this变量我的代码可以工作，即使在理论上（根据我所知）
$scope
也应该这样做

代码
假设我有一个页面，我想显示一个大的数字列表。假设我有分页，我希望每页的默认数字量为4。我们还假设在向服务器发出每个请求后，我再次将每页显示的数字量设置为4

app.js

/*global angular, $http*/

(function() {
    var app = angular.module("myNumbers", []);

    app.directive("numberFilter", function() {
        return {
            restrict: "E",
            templateUrl: "number-filter.html",
            controller: function($scope, $http) {
                $scope.filter = {
                    itemsPerPage: 4
                };

                $scope.makeRequest = function(numberList) {
                    console.log("Received submit order");

                    $http({
                        method: 'GET',
                        url: 'https://myNumberServer.com/api/v1/getPrimes',
                        headers: {
                            'Content-Type': 'application/json; charset=utf-8'
                        }
                    }).then(function successCallback(response) {
                        numberList= response.data.entries;
                        $scope.totalPages = response.data.totalPages;
                        $scope.filter = {itemsPerPage: 4};
                        console.log("success!");
                    }, function errorCallback(response) {
                        console.log('Error: ' + response);
                    });
                };
            },
            controllerAs: "filterCtrl"
        };
    });
})();

数字过滤器.html

<form ng-submit="filterCtrl.makeRequest(myNumbers.numberList)"> 
        <div >
            <label for="items_per_page-input">Items per page</label>
            <input  type="number" id="items_per_page-input" ng-model="filterCtrl.filter.itemsPerPage">
        </div>            

        <div>
            <button type="submit">Submit</button>
        </div>
</form>


每页项目数
提交

有两种预期行为应该发生，但不会发生：

当我单击提交时，我应该在控制台中看到“已收到提交订单”
，而我没有
加载页面时，
input
元素应初始化为4
如果我使用
var self=this，这两种行为都会发生欺骗并将所有提到的
$scope
替换为
self

问题:

为什么这不起作用？我错过了一些结尾吗
您使用的是
controllerAs
语法，因此在使用该语法时，需要将模型指定给控制器对象本身，而不是$scope

范例

controller: function($scope, $http) {

  var vm = this; // always store reference of "this"

  // use that reference instead of $scope
  vm.filter = {
    itemsPerPage: 4
  };

  vm.makeRequest = function(numberList) {
    console.log("Received submit order");

    $http({
      method: 'GET',
      url: 'https://myNumberServer.com/api/v1/getPrimes',
      headers: {
        'Content-Type': 'application/json; charset=utf-8'
      }
    }).then(function successCallback(response) {
      numberList = response.data.entries;
      vm.totalPages = response.data.totalPages;
      vm.filter = {
        itemsPerPage: 4
      };
      console.log("success!");
    }, function errorCallback(response) {
      console.log('Error: ' + response);
    });
  };
},

您使用的是
controllerAs
语法，因此在使用该语法时，需要将模型指定给控制器对象本身，而不是$scope

范例

controller: function($scope, $http) {

  var vm = this; // always store reference of "this"

  // use that reference instead of $scope
  vm.filter = {
    itemsPerPage: 4
  };

  vm.makeRequest = function(numberList) {
    console.log("Received submit order");

    $http({
      method: 'GET',
      url: 'https://myNumberServer.com/api/v1/getPrimes',
      headers: {
        'Content-Type': 'application/json; charset=utf-8'
      }
    }).then(function successCallback(response) {
      numberList = response.data.entries;
      vm.totalPages = response.data.totalPages;
      vm.filter = {
        itemsPerPage: 4
      };
      console.log("success!");
    }, function errorCallback(response) {
      console.log('Error: ' + response);
    });
  };
},

我认为
controllerAs
别名语法仅在绑定控制器实例
this
中的方法或属性时有效。我认为
controllerAs
别名语法仅在绑定控制器实例
this
中的方法或属性时有效。