Question

我遇到的问题是我的视图中的内容（来自数据库的内容）未在第一页加载时加载。但它确实在第二个。实施例

我从我的首页到视图我有我的内容（文字和数据库方法内容）
我第一次去那里，我只看到html中的文字。
我转到我网站上的另一个页面
然后我回到上一个包含数据内容的视图。现在它显示了内容。

为什么第一页上显示的数据内容没有显示？，我该如何解决？

应用/路由代码：

angular.module('App', ['ngRoute'])

.config(function ($routeProvider) {
    $routeProvider

        .when('/Employee', {
            templateUrl: 'Employee/EmployeeResult',
            controller: 'EmployeeController',
            controllerAs: 'EmployeeCtrl',
             })

控制器代码：

angular.module('App')
    .controller('EmployeeController',
    function ($scope, $http, $location, getClassInfoForTeacher, $routeParams)
    {
        var vm = this;
        vm.info;
        vm.info = getClassInfoForTeacher.get();

        vm.ClassClick = function () {
            $location.path('/Employee/EmployeeClassSelect');      
        }
    })

工厂代码：

angular.module('App')
    .factory('getClassInfoForTeacher', function ($http) {
        var obj;
        $http.get("/employee/GetClassInfoForTeacher")
                .success(function (response) {
                    obj = JSON.parse('[' + response + ']');
                });
        return {
            get: function () {
                return obj;
            }
        };

    });

<div class="emphome-wrapper" ng-controller="EmployeeController as EmployeeCtrl" >
    <div class="row">
        <div class="col-md-4"  ng-repeat="g in EmployeeCtrl.info| unique : 'Grade'">
            <h1 >Årskurs {{g.Grade}} </h1>
            <div class="col-md-4 gradeSelect" ng-repeat="c in EmployeeCtrl.info | filter:{Grade: g.Grade}" ng-click="EmployeeCtrl.ClassClick(c.Id)"> {{c.Name}}</div> 

        </div>
    </div>
</div>

enter image description here

这是我现在从功能中回来的。

控制器代码：

angular.module('App')
    .controller('EmployeeController',
    ['$scope','$http','$location','$routeParams','getClassInfoForTeacher',
    function ($scope,$http, $location,$routeParams, getClassInfoForTeacher)
    {
        var vm = this;
        
       getClassInfoForTeacher.get().then(function (response)
       {
          
            vm.info = response;
           
            console.log(vm.info);
         });
      
        vm.ClassClick = function () {
            $location.path('/Employee/EmployeeClassSelect');
        }
    }])
.filter('unique', function () {
    return function (collection, keyname) {
        var output = [],
            keys = [];

        angular.forEach(collection, function (item) {
            var key = item[keyname];
            if (keys.indexOf(key) === -1) {
                keys.push(key);
                output.push(item);
            }
        });

        return output;
    };
});

工厂代码：

angular.module('App')
    .factory('getClassInfoForTeacher', function ($http) {
        
        var teacherService = {}

        teacherService.get = function ()
        {
            return $http.get("/employee/GetClassInfoForTeacher")
                .success(function (response) {
                    response = JSON.parse('[' + response + ']');
                                                    
                });      
        };
        return teacherService;     
    });

html代码：

<div class="emphome-wrapper" ng-controller="EmployeeController as EmployeeCtrl" >
    <div class="row">
        <div class="col-md-4"  ng-repeat="g in EmployeeCtrl.info| unique : 'Grade'">
           
            <h1 >Årskurs {{g}}</h1>
            <div class="col-md-4 gradeSelect" ng-repeat="c in EmployeeCtrl.info | filter:{Grade: g.Grade}" ng-click="EmployeeCtrl.ClassClick(c.Id)"> {{c.Name}}</div> 

        </div>
    </div>
    </div>

这就是我在html中只有{{g}}时在屏幕上显示的内容

Årskurs ["{\"Id\":\"AA6C05F9-98DF-4A8D-B055-10DB07557F0D\",\"Name\":\"1C\",\"Grade\":1,\"TeacherId\":\"1E51E989-8ED5-4988-B929-4FBCD8A7977D\"}","{\"Id\":\"C07D54D9-01B0-4CC8-A8CC-0FDD47EAFE5C\",\"Name\":\"1B\",\"Grade\":1,\"TeacherId\":\"1E51E989-8ED5-4988-B929-4FBCD8A7977D\"}","{\"Id\":\"15218673-874B-41C1-9910-AD4F185F5730\",\"Name\":\"2C\",\"Grade\":2,\"TeacherId\":\"1E51E989-8ED5-4988-B929-4FBCD8A7977D\"}","{\"Id\":\"4711EEEE-4B56-4FD8-9A15-648CE00090A3\",\"Name\":\"2A\",\"Grade\":2,\"TeacherId\":\"1E51E989-8ED5-4988-B929-4FBCD8A7977D\"}"]

我试过{{g.Grade}}但是它在视图中没有显示任何内容。我怎样才能将每个对象的等级放在此数组的视图中。如果数组包含多于1个等级“1”，则它应该只显示一次。而不是2次。我该怎么做？

我在工厂删除了解析，所以我只是回复了承诺。

然后我改变了这样的控制器。它与html中的{{g.Grade}}一起使用

getClassInfoForTeacher.get().then(function (response) {

        vm.info = JSON.parse('[' + response.data+ ']');
        console.log(vm.info);
    });

有更好的方法来实现这一目标吗？

Answer 1

由于它是异步的，你会陷入典型的AJAX问题。

angular.module('App').factory('getClassInfoForTeacher', function ($http) {

    // Also it's much more readable to create factories using an object
    var teacherService = {};  

    teacherService.get = function () {
        return $http.get( /* your code */ );
        // ^^ return the entire PROMISE
    };

    return teacherService;
});

您的控制器:(注意缩小代码时使用['$scope', function ($scope) { }]);表示法。

angular.module('App').controller('EmployeeController', 
    ['$scope', '$location', '$routeParams', 'getClassInfoForTeacher',         
    function ($scope, $location, $routeParams, getClassInfoForTeacher /* put angular things FIRST */)
{
    var vm = this;

    // Then gets hit after the AJAX has completed and will populate your model
    getClassInfoForTeacher.get().then(function (response) {
        vm.info = response;
    });

}]);

数据内容不会在首页加载时加载，但会在第二页加载时加载

1 个答案: