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

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

我的HTML如下所示：

{{brand}}


{{myData.brand}
删除

我的js如下所示：

var-app=angular.module（'myApp'，['ngResource'，'myAppControllers'，'myAppServices']）；
var服务=角度
.module（'myAppServices'，[]）
.factory（'api'，函数（$resource）{
返回$resource（“/api/Brand/：id”，
{id:'@id'}
);
});
var控制器=角度控制器
.module（'MyAppController'，[]）
.控制器（'ctrl1'[
“$scope”，“api”，函数（$scope，api）{
$scope.myData={
品牌列表：[]，
品牌：{}，
};
$scope.setBrandList=函数（）{
console.log（“setBrandList”）；
api.query（）.$promise.then（函数（响应）{
console.log（“setBrandList-success”）；
$scope.myData.brandList=响应；
},
功能（错误响应）{
console.log（“setBrandList-error”）；
});
};
$scope.setBrand=函数（）{
控制台日志（“setBrand”）；
get（{id:“minolta”}）。$promise.then（函数（响应）{
console.log（“setBrand-success”）；
$scope.myData.brand=响应；
},
功能（错误响应）{
console.log（“setBrand-error”）；
});
};
$scope.deleteBrand=函数（id）{
console.log（“deleteBrand（“+id+”））；
delete（{id:id}）。$promise.then（函数（响应）{
console.log（“删除品牌-成功”）；
$scope.setBrandList（）；
},
功能（错误响应）{
console.log（“deleteBrand-error”）；
});
};
$scope.setBrand（）；
$scope.setBrandList（）；
}
]);

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

我只是误解了什么吗？还是我定义得不恰当？我相信setBrand和setBrandList只会被调用一次

---

提前感谢。

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

    <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>

    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>