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

Question

>我需要在主体HTML页面中包含一些代码，但是当我使用ng-include时，添加了HTML，但代码似乎无法正常工作。

我有 3 个主要组件：

索引.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>

输入.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}}

最后是应用程序.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>