Содержимое данных не загружается при загрузке первой страницы, но выполняется на 2-й странице-загрузке

Question

Проблема, с которой я сталкиваюсь, заключается в том, что содержимое на моем представлении (контент, поступающий из базы данных) не загружается при загрузке первой страницы. но это делается на втором. Пример

1. Я иду с моей стартовой странице в представлении у меня есть свой контент (текст и содержание метода базы данных)
2. Первый раз, когда я там я вижу только мои тексты, которые находятся в HTML.
3. Я перехожу на другую страницу на своем сайте
4. Затем я возвращаюсь к предыдущему виду, содержащему данные. и теперь это показывает, что контент.

Почему не отображается содержание данных, отображаемое на первой странице ?, и как это можно решить?

код

App/маршрутизации:

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>

Это то, что я вернусь из функции в настоящее время. Код

Контроллер:

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

Å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\"}"]

Ive пытался с {{g.Grade}} но тогда он ничего не показывает на представлении. Как я могу просто поставить класс каждого объекта в представлении в этом массиве. Если массив содержит более 1 класса «1», он должен отображать только один раз. И не 2 раза. Как мне это сделать?

Хорошо, я нашел решение для этого. но . это похоже на этот арант, правильный способ сделать это.

Я удалил разбор на фабрике, поэтому я только что вернул обещание.

, а затем я сменил контроллер следующим образом. и он работал с {{}} g.Grade в HTML

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; 
    }); 

}]);