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（一段简单的代码，我使用 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 };
    });

如果我将所有代码放在一个页面中，它可以工作......但如果我这样写......它不会像我希望的那样工作......实际上尖括号之间的表达式是执行......但另一个代码没有。 我该怎么办？

Answer 1

我已经做了一个示例代码 sn-p 复制您的问题，它似乎工作，运行代码 sn-p

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>