Question

如果使用此sytax：<div ng-controller="BuildingsCtrl as bc">是为了避免使用$scope（显然it is），那么我应该如何使用$http？

也就是说，如何重新编写以下代码以不使用$ scope？

angular.module('atlasAngularApp')
    .controller('BuildingsCtrl', function ($scope, $http) {
        this.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
        this.getBuildings = function () {
            $http.get('http://localhost:40602/api/1.0/buildings')
                .then(function successCallaback(response) {
             ======>    $scope.buildings = response.data;
                    }, function errorCallback(response) {
                        alert("Error");
                }
            );
       }
   });

详细说明，

<li ng-repeat="thing in bc.awesomeThings">
    {{ thing }}
</li>

适用于this.awesomeThings，因此视图可以使用this，但以下内容无效：

angular.module('atlasAngularApp')
    .controller('BuildingsCtrl', function ($http) {
        var self = this;
        this.getBuildings = function () {
            $http.get('http://localhost:40602/api/1.0/buildings')
                .then(function successCallaback(response) {
             ======>    self.buildings = response.data;
                    }, function errorCallback(response) {
                        alert("Error");
                }
            );
       }
   });

（注意self.buildings位。）

我在这些主题上尝试了很多变化，但到目前为止还没有任何效果。 This问题类似，但我无法使其适应我的代码。

我应该补充一点，我没有任何反对$scope的东西，我只是试图按照自己生成的角度似乎赞同的方式做事。我还想解释为什么$scope可能被视为坏事。

为了完整起见，请参阅我的观点。也许它有问题吗？

<div ng-controller="BuildingsCtrl as bc">
    <table ng-init="buildings = bc.getBuildings()">
        <tr ng-repeat="building in buildings">
            <td>{{ building.name }}</td>
            <td>{{ building.code }}</td>
            <td>{{ building.image }}</td>
        </tr>
    </table>
</div>

只要我使用$scope

，代码就可以正常运行

Answer 1

您正在创建ng-init="buildings = bc.getBuildings()"但未返回任何要绑定到buildings的内容，而是将self.buildings的值间接分配给this.buildings。所以，你对buildings的重复不起作用。现在，当您分配到this.buildings bc.buildings时，您实际上是指在视野中。所以，

<tr ng-repeat="building in bc.buildings">

重复你的元素。

关于使用$scope和this的答案。没有比这里更好的解释：'this' vs $scope in AngularJS controllers

Answer 2

首先，那些对后端的调用不应该由控制器来完成。你应该为它做一个服务来为你服务。

其次，大多数时候你会看到这样的控制器：

angular.module('atlasAngularApp')
.controller('BuildingsCtrl', function ($scope, $http) {
    var vm = this;
    vm.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
    ];

    vm.getBuildings = getBuildings;



    function getBuildings() {
        $http.get('http://localhost:40602/api/1.0/buildings')
            .then(function successCallaback(response) {
                vm.buildings = response.data;
                }, function errorCallback(response) {
                    alert("Error");
            }
        );
   }
});

就像那样你可以在你的html中遍历vm的建筑物：

<li ng-repeat="building in bc.buildings">
   {{ building }}
</li>

关于最佳实践的一个很好的资源是John Papa的风格指南：https://github.com/johnpapa/angular-styleguide

Angular：使用没有$ scope的$ http

2 个答案: