[英]ng-include make ng-controller and ng-repeat not working
我需要在主体HTML页面中包含一些代码,但是当我使用ng-include时,会添加HTML,但是代码似乎无法正常工作。
我有3个主要组成部分:
index.html(主页)
<div id="Central" ng-hide="masterCtrl.isMenuOpen()">
<div id="Login" ng-controller="LoginController as loginCtrl" ng-hide="masterCtrl.isUserLogged()" ng-include="'Login/index.html'"></div>
<div id="SiteList" ng-controller="SiteController as siteCtrl" ng-if="masterCtrl.isUserLogged()" ng-include="'Select/index.html'" ng-init="siteCtrl.getSites()"></div>
</div>
Input.html(一段简单的代码,我使用ng-include添加到HTML主页面中)
<div class="sel sel--black-panther" >
<select name="select-site" id="select-site" >
<option value="" disabled>Sito</option>
<option ng-repeat="sito in siteCtrl.siti" value="{{sito.name}}">{{sito.name}}</option>
</select>
</div>
{{siteCtrl.siti[0].name}}
最后是app.js
var app = angular.module('Test', ['ngIdle','ngRoute']);
app.controller('MasterController', function($scope, $http,communication) {
this.isMenuOpen = function(){
return communication.getIsMenuOpen();
};
this.isUserLogged = function(){
return communication.getIsUserLogged();
}
this.getUtente = function(){
return communication.getUtente();
}
});
app.controller('SiteController', function($scope, $http,communication,checkToken) {
var amministrazione = this;
amministrazione.siti= [];
this.getSites = function(){ //funzione per tentare il Login
var user = communication.getUtente();
if( . . .){ //Amministratore Sito
var loginId = user.loginId;
var token = user.token;
$scope.SiteRequest(. . .);
}else{
//Non AUTORIZZATO
}
};
$scope.SiteRequest = function (. . .) { //funzione che chiama il servizio rest del Login
var isTokenValid = checkToken.getData( . . .);
isTokenValid.then(function(result) {
if(result){
$http({
method: "GET",
url: " . . .",
headers: {
. . .
},
}).then(function mySuccess(response) {
setTimeout(
function(){
$scope.$apply(
function (){
amministrazione.siti = response.data;
}
)
}, 2000);
}, function myError(response) {
});
}else{
alert("Token Non più valido, verra reindirizzato alla pagina di Login");
}
});
}
});
//Questo servizio gestisce la communicazione tra i vari controller ed il MasterController
app.service('communication', function($http) {
var isMenuOpen = false;
var isUserLogged = false;
var utente = [];
var setIsMenuOpen = function(value) {
isMenuOpen = value;
};
var getIsMenuOpen = function(){
return isMenuOpen;
};
var setIsUserLogged = function(value) {
isUserLogged = value;
};
var getIsUserLogged = function(){
return isUserLogged;
};
var setUtente = function(value) {
utente = value;
};
var getUtente = function(){
return utente;
};
var getUserLvl = function(){
. . .
}
return {
setIsMenuOpen: setIsMenuOpen,
getIsMenuOpen: getIsMenuOpen,
setIsUserLogged: setIsUserLogged,
getIsUserLogged: getIsUserLogged,
setUtente: setUtente,
getUtente: getUtente,
getUserLvl: getUserLvl
};
});
app.factory('checkToken', function($http) {
var getData = function(loginId,token) {
// Angular $http() and then() both return promises themselves
return $http({
method: "PUT",
url: ". . .",
headers: {
. . .
},
}).then(function(result){
return result.data;
});
};
return { getData: getData };
});
如果我将所有代码放在页面中都可以工作...但是如果我这样写它...就不能像我希望的那样...事实上尖括号之间的表达式是执行的...但是另一个代码编号 我该怎么办 ?
我已经完成了一个复制您的问题的示例代码片段,它似乎可以正常运行,请运行该代码片段
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; var vm = this; vm.isUserLogged = function(){ return true; } }); app.controller('SiteController', function($scope) { var vm = this; vm.siti = []; vm.getSites = function(){ vm.siti = [ {id:1, name:'Theophilus Omoregbee'}, {id:2, name:'Wisdom Omoregbee'}, { id:3, name:'Miracle Omoregbee'} ]; } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="plunker" ng-controller="MainCtrl as masterCtrl"> <div id="SiteList" ng-controller="SiteController as siteCtrl" ng-if="masterCtrl.isUserLogged()" ng-include="'input.html'" ng-init="siteCtrl.getSites()"></div> </body> <script type="text/ng-template" id="input.html"> <div class="sel sel--black-panther" > <select name="select-site" id="select-site" > <option value="" disabled>Sito</option> <option ng-repeat="sito in siteCtrl.siti" value="{{sito.name}}">{{sito.name}}</option> </select> </div> {{siteCtrl.siti[0].name}} </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.