ngInit angular ディレクティブを使用して、html の 3 つのドロップダウンにデータをロードする際に問題があります。
ng-init からコントローラーのメソッドinitAll()を呼び出します。この関数は、3 つのselect要素の値のリストをロードしますが、表示されるのはブランドの 1 つだけです。他の人はそうではなく、エラーが発生します：
応答は未定義です
たとえば、そのうちの 2 つをコメントすると、次のようになります。
//$scope.initBrandsSelect();
$scope.initHotelsSelect();
//$scope.initPortalsSelect();
ホテルが表示され、エラーが表示されないのですが、何が起こっているのですか? ngInit にあまりにも多くのものをロードすることに関連していますか??
以下のコードを参照してください。
ダッシュボードCtrl.js
angular.module("app.user").controller('DashboardCtrl',
['$scope', '$http', 'CookiesModel', 'NetWorkModel', 'DescargaCsvModel', 'NotificacionModel',
'$timeout', 'UserModel', 'SocketIOModel','DashboardModel',
function ($scope, $upload, CookiesModel, NetWorkModel, DescargaCsvModel, NotificacionModel,
$timeout, UserModel, SocketIOModel, DashboardModel) {
$scope.UserModel = UserModel;
$scope.DashboardModel = DashboardModel;
$scope.initAll = function(){
$scope.initBrandsSelect();
$scope.initHotelsSelect();
$scope.initPortalsSelect();
};
$scope.getReviews = function() {
$scope.intranetLoading.value = true;
DashboardModel.getReviews( function() {
});
$scope.intranetLoading.value = false;
};
$scope.initBrandsSelect = function() {
$scope.intranetLoading.value = true;
DashboardModel.getAllBrands( function(response) {
$scope.DashboardModel.brands = response.brands;
});
};
$scope.initHotelsSelect = function() {
DashboardModel.getAllHotels( function(response) {
$scope.DashboardModel.hotels = response.hotels;
$scope.intranetLoading.value = false;
});
};
$scope.initPortalsSelect = function() {
DashboardModel.getAllPortals( function(response) {
$scope.DashboardModel.portals = response.portals;
$scope.intranetLoading.value = false;
});
};
}]);
ダッシュボードModel.js
angular.module("app.opinium").service("DashboardModel", ['$filter', 'NetWorkModel', 'NotificacionModel', function ($filter, NetWorkModel, NotificacionModel) {
var self = this; // Guardamos la referencia
this.filterReviews = {
"brandId": 471,
"hotId" : 92,
"portalId" : 1,
"startDate" : new Date(2016, 0, 1),
"endDate" : new Date()
};
this.brands = []
this.hotels = []
this.portals = []
this.reviews = []
this.getReviews = function () {
var metodoPeticion = 'GetReviews';
var dataEntrada = {
"brand_id": self.filterReviews.brandId,
"hot_id" : self.filterReviews.hotId,
"portal_id" : self.filterReviews.portalId,
"start_date" : $filter('date')(self.filterReviews.startDate, "yyyy-MM-dd"),
"end_date" : $filter('date')(self.filterReviews.endDate, "yyyy-MM-dd")
};
NetWorkModel.sendRequestOpiniumServlet("review", metodoPeticion, dataEntrada, "JSON", function (response) {
self.reviews = response.Salida.reviews;
});
};
this.getAllBrands = function(callback) {
var metodoPeticion = 'GetAllBrands';
var dataEntrada = {};
NetWorkModel.sendRequestOpiniumServlet("brand", metodoPeticion, dataEntrada, "JSON", function(response){
callback(response.Salida);
});
};
this.getAllHotels = function(callback) {
var metodoPeticion = 'GetAllHotels';
var dataEntrada = {};
NetWorkModel.sendRequestOpiniumServlet("hotel", metodoPeticion, dataEntrada, "JSON", function(response){
callback(response.Salida);
});
};
this.getAllPortals = function(callback) {
var metodoPeticion = 'GetAllPortals';
var dataEntrada = {};
NetWorkModel.sendRequestOpiniumServlet("portal", metodoPeticion, dataEntrada, "JSON", function(response){
callback(response.Salida);
});
};
}]);
ダッシュボード.html
<div ng-controller="DashboardCtrl" ng-init="intranetLoading.value=false;initAll();" class="container-fluid ng-scope">
<!--{{UserModel.user | json}}-->
<div class="row ">
<div class="col-sm-1">
Marca:
</div>
<div class="col-sm-2">
<select class="form-control" ng-model="DashboardModel.filterReviews.brandId"
ng-options="elementOption.id as elementOption.name for elementOption in DashboardModel.brands"></select>
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row ">
<div class="col-sm-1">
Hotel:
</div>
<div class="col-sm-2">
<select class="form-control" ng-model="DashboardModel.filterReviews.hotId"
ng-options="elementOption.id as elementOption.name for elementOption in DashboardModel.hotels"></select>
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row ">
<div class="col-sm-1">
Portal:
</div>
<div class="col-sm-2">
<select class="form-control" ng-model="DashboardModel.filterReviews.portalId"
ng-options="elementOption.id as elementOption.name for elementOption in DashboardModel.portals"></select>
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row ">
<div class="col-sm-1">
Inicio:
</div>
<div class="col-sm-2">
<input type="date" class="form-control" ng-model="DashboardModel.filterReviews.startDate">
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row ">
<div class="col-sm-1">
Fin:
</div>
<div class="col-sm-2">
<input type="date" class="form-control" ng-model="DashboardModel.filterReviews.endDate">
</div>
<div class="col-sm-9">
</div>
</div>
<div class="row ">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<button class="btn btn-primary" ng-click="getReviews()">Filtrar</button>
</div>
<div class="col-sm-9">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-12">
<span>Respuesta servlet: {{DashboardModel.reviews}}</span>
</div>
</div>
</div>
これは、私が書いたものではないsendRequestOpiniumServletメソッドのコードです。
this.sendRequestOpiniumServlet = function (servicioPeticion, metodoPeticion, dataEntrada, tipoPeticion, callback, $files) {
//Reset de la request y ponemos los valores del ususario
self.resetValue();
//Ponemos datos de la peticion
self.request.Servicio = servicioPeticion;
self.request.Metodo = metodoPeticion;
self.request.Entrada = dataEntrada;
var tipo = "";
if (tipoPeticion === "JSON") {
tipo = "";
self.request.Tipo = tipo;
self.sendHttpJSON(self.servers.urlOpinium, function (data) {
callback(data);
});
} else if (tipoPeticion === "CSV") {
tipo = "CSV";
self.request.Tipo = tipo;
var nombreCSV = servicioPeticion;
self.sendHttpCSV(nombreCSV, self.servers.urlOpinium, function (data) {
callback(data);
});
} else if (tipoPeticion === "IMG") {
tipo = "IMG";
self.request.Tipo = tipo;
self.sendHttpIMG(self.servers.urlOpinium, $files, function (data) {
callback(data);
});
}
};
sendHttpJSON メソッド:
this.sendHttpJSON = function (urlService, callback) {
var requestAux = angular.copy(self.request);
this.request = {
"Servicio": "",
"Metodo": "",
"Tipo": "",
"Entrada": {},
"Id": "",
setHistorial_cambios: undefined,
"URL": "",
"recuerdame_id": ""
};
$http({
method: self.servers.method, url: urlService,
// data: $.param(self.request),
data: JSON.stringify(requestAux),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, cfg) {
//self.response = data;
//Miramos si estamos en el login o la cookie de recordar usuario ha caducado, guardamos el id en la cookie
if ((data.Metodo === 'GetLogin' && data.Servicio === 'usuarios' && data.Id !== '') || CookiesModel.getCookie("intranet_session_id") === "undefined" || CookiesModel.getCookie("intranet_session_id") !== data.Id) {
//Guardamos id en la cookie
if (data.Salida !== undefined) {
CookiesModel.setCookie("intranet_session_id", data.Id, parseInt(self.tiempo_sesion_usuario));
CookiesModel.setCookie("last_session_id", data.Id, 5 * 1440); // 5 dias a minutos
if (data.Salida.recordarUsuario === true) {
if(CookiesModel.getCookie("recordar_usuario") === "undefined") {
CookiesModel.setCookie("recordar_usuario", new Date().toUTCString(), 5 * 1440);
}
} else if (CookiesModel.getCookie("intranet_session_id") !== "undefined") {
// NOOP: Cookie 'recordar_usuario' queda con misma caducidad
} else {
CookiesModel.deleteCookie("recordar_usuario");
}
}
}
if (!errorPeticion(data)) {
// callback(self.response);
callback(data);
} else {
//Session expira o hay errores reenvio al login
self.logout = true;
// window.location = appConfig.location.login;
}
}).error(function (data, status, headers, cfg) {
//Mostrar error al ususario
NotificacionModel.mostrarNotificacion({
title: 'Servidor: ' + urlService,
message: 'Error en la conexión con el servidor',
size: 'xlarge', //small,large
type: 'error', //error,notice,warning
duration: '5000'
});
callback("undefined");
});
};
resetValue() メソッド:
this.resetValue = function () {
self.request.Servicio = "";
self.request.Metodo = "";
self.request.Tipo = "";
self.request.Entrada = {};
self.request.URL = $location.absUrl();
if (CookiesModel.existObject("intranet_session_id")) {
self.request.Id = CookiesModel.getCookie("intranet_session_id");
// console.log("--- time:",self.tiempo_sesion_usuario);
if (self.tiempo_sesion_usuario !== undefined && self.tiempo_sesion_usuario !== "") {
CookiesModel.setCookie("intranet_session_id", self.request.Id, parseInt(self.tiempo_sesion_usuario));
} else {
//Descomentar para alargar 60min la session cada vez que se realize una session
CookiesModel.setCookie("intranet_session_id", self.request.Id, 60);
}
} else {
self.request.Id = "";
}
if (CookiesModel.getCookie("recordar_usuario") !== "undefined" && CookiesModel.getCookie("last_session_id") !== "undefined") {
self.request.recuerdame_id = CookiesModel.getCookie("last_session_id");
} else {
self.request.recuerdame_id = "";
}
};