AngularJS $scope 在 .then 函数之外未定义

Question

我有一个包含选择输入的表单，但问题是 ng-options 不起作用

选择代码

<select  ng-model="selectedGender" ng-options="item.value for item in genderData">

我的数据来自

 ReferenceService.searchCategory("GENDER").then(function (response){

            $scope.genderData = response.data;
            console.log($scope.genderData);

        })

这是 console.log($scope.genderData)

Array(2)
0:{referenceId: 1, category: "GENDER", key: "GENDER_KEY", value: "Male", $$hashKey: "object:3"}
1:{referenceId: 2, category: "GENDER", key: "GENDER_KEY", value: "Female", $$hashKey: "object:4"}
length:2
__proto__
:
Array(0)

但我已经尝试对数据进行硬编码

  $scope.genderData= [
            {
                "id": 1,
                "name": "Leanne Graham",
                "username": "Bret",
                "email": "Sincere@april.biz",
                "address": {
                    "street": "Kulas Light",
                    "suite": "Apt. 556",
                    "city": "Gwenborough",
                    "zipcode": "92998-3874",
                    "geo": {
                        "lat": "-37.3159",
                        "lng": "81.1496"
                    }
                },
                "phone": "1-770-736-8031 x56442",
                "website": "hildegard.org",
                "company": {
                    "name": "Romaguera-Crona",
                    "catchPhrase": "Multi-layered client-server neural-net",
                    "bs": "harness real-time e-markets"
                }
            } 
        ];

它成功了！但我用ng-options="item.name for item in genderData">

顺便说一句，不要介意我刚刚搜索的数据以便快速使用

编辑：

我想我找到了问题所在。为什么在函数外未定义？

检查这个控制台

第 244 行未定义，但第 242 行未定义？

Answer 1

那是因为ReferenceService.searchCategory("GENDER") 返回了一个promise。

promise 将等到数据解析完毕，然后转到其 success 函数回调。哪个是.then(function(response))。

因此代码将在承诺完成之前到达244 线上的console.log，并且$scope.genderData 已创建，因此为undefined

242线上的console.log会等到promise被解析后，调用成功回调函数。

更新：

这里是一个如何将$scope 正确链接到factory 的示例。

请注意，您必须在您的$scope 中链接到object，而不是其properties。

错误：

$scope.gender = ReferenceService.data.genderData;

正确：

$scope.gender = ReferenceService.data;

示例：

myApp.factory('ReferenceService',
    function ()
    {
        var ReferenceService = {
            // This is the global object. Link the $scope to this object
            data: {
                genderData: {}
            },
            searchCategory: function (type)
            {
                var getData = $http.get("URL", { params: { gender: type } }).then(
                    function (response)
                    {
                        // Store the data in the factory instead of the controller
                        // You can now link your controller to the ReferenceService.data
                        ReferenceService.data.genderData = response.data;
                    }
                )

                return getData;
            }
        }

        return ReferenceService;
    }
);

myApp.controller('MyController',
    function ($scope, ReferenceService)
    {
        // Link $scope to data factory object
        $scope.gender = ReferenceService.data;

        // Now you only have to call the factory function
        ReferenceService.searchCategory("GENDER");

        // This will now log the correct data
        console.log($scope.gender.genderData);
    }
)

Answer 2

将响应存储在var 中，然后在函数外部将该变量分配给$scope。这是一个回调问题。

如果仍然显示相同，您可以使用 localsorage 来存储和获取数据。但是在 angularjs 中不推荐这种方法。但如果什么都没发生，那么你也可以使用这个方法