为什么错误：输入未定义AngularJS

Question

我正在尝试从 Angular js 向 php 发出 ajax 请求。但我没有得到我通过 php 文件发送的数据。

我收到此错误：

错误：输入未定义

我的来源：

文件view.html：

<div class="content-panel" >
    <div class="content-panel-title">
        <h2> Date : {{jalse.contentDate}}</h2>
    </div>
    <div>
        <h4>{{jalse.contentAbstract}}</h4>
        <div>
            {{jalse.contentText}}
        </div>
    </div>
</div>

文件 app.js：

 (function () {
var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider

            .when('/', {
                controller: 'contentsCtrl',
                templateUrl: 'views/contents.php'
            })

            .when('/jalse/:jalseId', {
                controller: 'recordsCtrl',
                templateUrl: 'views/jalse.php'
            })

            .otherwise({redirectTo: '/'});
});

}());

文件 jalseFactory.js：

    (function () {

'use strict';

var jasleFactory = function ($http, $q) {

var factory = {};

factory.getJalse = function () {
    var deferred = $q.defer();

    $http({method: 'GET', url: 'includes/records.php'}).
            success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).
            error(function (data, status, headers, config) {
                deferred.reject(data);
            });
    return deferred.promise;
  };
return factory;
};

jasleFactory.$inject = ['$http', '$q'];
angular.module('myApp').factory('jasleFactory', jasleFactory);

}());

文件记录Ctrl.js：

(function () {
'use strict';

var recordsCtrl = function($scope, $routeParams , jasleFactory) {
    var jalseId = $routeParams.jalseId;

    $scope.records = jasleFactory.getJalse();

    $scope.jalse = null;

    function init() {
        for (var i = 0, len = $scope.records.length; i < len; i++) {
            if ($scope.records[i].contentID == parseInt(jalseId)) {
                $scope.jalse = $scope.records[i];
                break;
            }
        }
    }

    init();

};

   recordsCtrl.$inject = ['$scope','$routeParams', 'jasleFactory'];

    angular.module('myApp').controller('recordsCtrl', recordsCtrl);

}());

Answer 1

您的代码正在创建一个 ajax，然后假设响应设置为 records 变量，当您处理异步调用时，您应该调用将在其成功内调用 $scope.records 的方法。

工厂方法

factory.getJalse = function () {
    return $http({method: 'GET', url: 'includes/records.php'});
};

控制器

(function() {
    'use strict';
    var recordsCtrl = function($scope, $routeParams, jasleFactory) {
        var jalseId = $routeParams.jalseId;

        jasleFactory.getJalse().success(function(data, status, headers, config) {
            $scope.records = data.records;
            init(); //this will fix your error.
        }).
        error(function(error, status, headers, config) {
            console.log("error occured " + error)
        });
        $scope.jalse = null;
        function init() {
            for (var i = 0, len = $scope.records.length; i < len; i++) {
                if ($scope.records[i].contentID == parseInt(jalseId)) {
                    $scope.jalse = $scope.records[i];
                    break;
                }
            }
        }
        //we will call this as soon as $scope.records gets filled
        //init(); 
    };
  recordsCtrl.$inject = ['$scope','$routeParams', 'jasleFactory'];

  angular.module('myApp').controller('recordsCtrl', recordsCtrl);

}());

更新

你的 json 也是无效的，因为它包含一个恶意字段

"contentText": "1\ u0645\ u0637\ u0644\ u0628 < \/p>",
"3":"1\ u0645\ u0637\ u0644\ u0628 < \/p>",

如果您删除这两个字段，您的代码将按原样工作

Working Plunkr