ng-include使ng-controller和ng-repeat不起作用

Question

我需要在主要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（一個簡單的一段代碼，我添加到主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 }; 
    }); 

如果我把所有的代碼放在一個頁面中，它可以工作......但是如果我這樣寫的話......它不會像我希望的那樣工作......事實上，尖括號之間的表達式是執行的......但其他代碼沒有。 我該怎麼辦？

Answer 1

我做了一個示例代碼段複製您的問題，似乎工作，運行的代碼片段

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>