Question

背景

在关注AngularJS tutorial on codeSchool并阅读一些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"
        };
    });
})();

数filter.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>

有两种预期的行为应该发生，并且不要：

当我点击提交时，我应该会在控制台"Received submit order"中看到我不知道。
加载页面时，input元素应初始化为4.

如果我使用var self = this;技巧并将$scope的所有提及替换为self，则会发生这两种行为。

问题：

为什么这不起作用？我错过了一些关闭吗？

Answer 1

您正在使用test { reports.html.destination = file("$buildDir/reports/gradle") ....语法，因此在使用时需要将模型分配给控制器对象本身，而不是$ scope

实施例

controllerAs

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

背景

问题

代码

1 个答案: