Question

我是angular的新手，我使用服务从json文件中获取数据，然后将数据返回给控制器。当我单击按钮时，控制器方法没有被执行，并且console.log中没有错误。我在这里失踪了什么？

我的服务代码：

Service.js

 app.factory('MovieService', function ($http) {
            var url = "js/data.json";
            var data;

            return {
                getData: function() {
                    return $http.get(url)
                        .success(function(response) {
                            data = response;
                            return data;

                        })
                        .error(function (error){
                            console.log("error");
                        })
                }
            };
        });

Controller.js

app.controller('MainController1', ['$scope', '$log','$location','MovieService', function($scope,$log,$location,MovieService) {

    console.log("click");
    var getData = function() {
            // This service's function returns a promise
            MovieService.getData()
                .then(function(data) {
                    // promise fulfilled
                   console.log("controller data");

                    $scope.custdata = data;
                    console.log($scope.custdata);

                }, function(error) {
                    // promise rejected, could log the error with: 
                    console.log("error");
                });
        };    


}])

的index.html

<div class="main" ng-controller="MainController1 as main">

        <input type="button" name="getdata" value ="Get data" ng-click="main.getData ()"></input>

    </div>

数据

[
    {
        "Id": "1",
        "Name": "Harry Potter"
    },
    {
        "Id": "2",
        "Name": "Jurassic Park"
    }
]

Answer 1

您需要在范围上绑定控制器功能。

$scope.getData = function() { }"

代替

var getData = function() { }

并在模板中调用

ng-click="getData ()"

Answer 2

您使用的是controller as alias语法。

在这种情况下，您需要从视图中访问的控制器功能应分配给this。

因此，将您的函数定义为this的属性而不是作为独立函数 - 如下所示：

this.getData = function () {...}

您正在使用var getData，这将使该功能成为本地功能而不会暴露它。

Answer 3

很少有事情要注意： -

1）您应该使用此代替var来以controller as语法将函数绑定到控制器： -

this.getData = function（）{//你的逻辑}

2）您首先在success()或error()然后在另一个then()函数中包装承诺两次，而不是这样： -

在服务中： -

 getData: function() {
                    return $http.get(url);

                }

在控制器中： -

 MovieService.getData()
                .then(function(response) {
                    // promise fulfilled
                   console.log("controller data");

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

                }, function(error) {
                    // promise rejected, could log the error with: 
                    console.log("error");
                });

3） <input>不应该像</input>那样关闭它没有结束标记。

希望有所帮助：）

<强> PLUNKER

使用工厂将数据返回到控制器时出错

3 个答案: