ng-include make ng-controller and ng-repeat not working

Question

I need to include some pieces of code in the principal HTML page, but when I use ng-include, the HTML is added, but the code doesn't seem to work properly.

I have 3 main component:

index.html ( the main Page )

<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 ( a simple piece of code, I add into the main HTML page using ng-include)

    <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}}

And last this is the 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 };
    });

If I put all the code in a page it works... but if I wrote it like this... it doesn't work like I wish... infact the expression between the angular brackets is execute... but the other code no. What should I do ?

I already read this post... but I think this is no the case... it works as half of what it should — Alessandro Pierro, Oct 15 '17 at 22:32

score 0 · Accepted Answer · answered Oct 15 '17 at 23:08

0

I have done a sample code snippet replicating your problem and it seems working, Run the code snippet

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>

answered Oct 15 '17 at 23:08

Theophilus Omoregbee

2,463
1
22
33

This is what I want... does it work also if the template is placed in an external file? – Alessandro Pierro Oct 15 '17 at 23:11
yes it does too, the script is outside the controller scope and script id can act as the file name here – Theophilus Omoregbee Oct 15 '17 at 23:12
the link to a plnkr with external `input.html` http://plnkr.co/edit/xHGI54?p=preview @AlessandroPierro – Theophilus Omoregbee Oct 15 '17 at 23:17
i think your app.js or ur controller file is faulty – Theophilus Omoregbee Oct 15 '17 at 23:22
you can add it to the question, so i can take a look – Theophilus Omoregbee Oct 15 '17 at 23:23
1

@AlessandroPierro the problem here is updating your view, as angular was unable to update the view, so to do that you use angular $digest and $apply, so wrap your `getSites` with $scope.$apply` check this http://plnkr.co/edit/BuOHiv?p=preview if it answers it let me know so i can update the answer – Theophilus Omoregbee Oct 15 '17 at 23:40
Updated like this, but it gives me error on another callbacks – Alessandro Pierro Oct 15 '17 at 23:57
this.getSites = function(){ //funzione per tentare il Login var user = communication.getUtente(); if(user.authLevel >= 10){ //Amministratore Sito var loginId = user.loginId; var token = user.token; setTimeout(function(loginId,token){ $scope.$apply(function (loginId,token) { $scope.SiteRequest(loginId,token); }); }, 2000); }else{ //Non AUTORIZZATO } }; – Alessandro Pierro Oct 15 '17 at 23:58
oh what i was trying to say was for you to run all your code within the `getSites` function in a ` $scope.$apply` – Theophilus Omoregbee Oct 16 '17 at 00:00
with ur case it would now be this `$scope.$apply(function ({amministrazione.siti = response.data;});` @AlessandroPierro – Theophilus Omoregbee Oct 16 '17 at 00:02
http://errors.angularjs.org/1.4.5/$rootScope/inprog?p0=%24digest giving me this error – Alessandro Pierro Oct 16 '17 at 00:08
@AlessandroPierro check this out, so you get better explanation http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – Theophilus Omoregbee Oct 16 '17 at 00:09
give your feedback to make the answer better, thanks – Theophilus Omoregbee Oct 16 '17 at 00:12
I just update the app.js to fit like u said, but it still didn't work... I also fixed rootScope error – Alessandro Pierro Oct 16 '17 at 00:19

ng-include make ng-controller and ng-repeat not working

1 Answers1