Question

我是AngularJS的新手并且使用$ resource。我正在向我的控制台写出日志语句而感到困惑，因为我看到了多个条目。

我的HTML看起来像这样：

    <div ng-controller="ctrl1">

        <!-- Brand List -->
        <ul  style="background-color: red;">
            <li ng-repeat="brand in myData.brandList">
                {{brand}}
            </li>
        </ul>

        <!-- Get Brand -->
        <div ng-controller="ctrl1" style="background-color: orange;">
            {{myData.brand}}
        </div>

        <button ng-controller="ctrl1" ng-click="deleteBrand('apple')">delete</button>

    </div>

</div>

我的js看起来像这样：

    var app = angular.module('myApp', ['ngResource', 'myAppControllers', 'myAppServices']);

    var services = angular
        .module('myAppServices', [])
        .factory('api', function ($resource) {
            return $resource('/api/Brand/:id',
                { id: '@id' }
            );
        });

    var controllers = angular
        .module('myAppControllers', [])
        .controller('ctrl1', [
            '$scope', 'api', function ($scope, api) {
                $scope.myData = {
                    brandList: [],
                    brand: {},
                };

                $scope.setBrandList = function () {
                    console.log("setBrandList");
                    api.query().$promise.then(function (response) {
                        console.log("setBrandList - success");
                        $scope.myData.brandList = response;
                    },
                        function (errResponse) {
                            console.log("setBrandList - error");
                        });
                };

                $scope.setBrand = function () {
                    console.log("setBrand");
                    api.get({ id: "minolta" }).$promise.then(function (response) {
                        console.log("setBrand - success");
                        $scope.myData.brand = response;
                    },
                        function (errResponse) {
                            console.log("setBrand - error");
                        });
                };

                $scope.deleteBrand = function (id) {
                    console.log("deleteBrand (" + id + ")");
                    api.delete({ id: id }).$promise.then(function (response) {
                        console.log("deleteBrand - success");
                        $scope.setBrandList();
                    },
                        function (errResponse) {
                            console.log("deleteBrand - error");
                        });
                };

                $scope.setBrand();
                $scope.setBrandList();
            }
        ]);

</script>

当我运行这个简单的例子时，我看到对setBrand和setBrandList的三个调用/响应。（见附图） console image

我只是误解了什么吗？或者我是否定义了不正确的东西？我的信念是setBrand和setBrandList只会被调用一次。

提前致谢。

Answer 1

那是因为您在模板中定义了3次控制器。您只需在第一个div中使用ng-controller指令。

AngularJS - 使用$ resource - 为什么我的控制台日志中有这么多条目？

1 个答案: