perché Ng Repeat non funziona se il pulsante viene richiamato da un modulo diverso?

Ho una tabella html che contiene una direttiva ng repeat e due button.Il primo aprirà un modal che contiene un nuovo modulo e fammi creare il mio utente e poi quando clicco su save lo aggiungerà alla lista. il secondo è nella stessa forma originale e si aggiunge un utente.perché Ng Repeat non funziona se il pulsante viene richiamato da un modulo diverso?

Quello che non ho capito perché quando clicco sul primo pulsante che è in una forma diversa non posso aggiornare la ripetizione ng tuttavia per il secondo è possibile. Questo è il codice:

homepage.jsp

<body ng-app="myApp"> 
    <div class="generic-container" ng-controller="UserController as ctrl"> 
     <div id="createUserContent.jsp" ng-include="createUserContent"></div> 
     <table> 
      <tr> 
       <td> 
        <button type="button" class="btn btn-primary" 
        ng-click="ctrl.openCreateUser()">Create</button> 
       </td> 
      </tr> 
     </table> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th>ID.</th> 
        <th>Name</th> 
        <th>Address</th> 
        <th>Email</th> 
        <th width="20%"></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="u in ctrl.users"> 
        <td><span ng-bind="u.ssoId"></span></td> 
        <td><span ng-bind="u.firstName"></span></td> 
        <td><span ng-bind="u.lastName"></span></td> 
        <td><span ng-bind="u.email"></span></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body>

user_controller.js

'use strict'; 

App.controller('UserController', function ($scope, UserService, $window, $log, $uibModalStack, 
     $uibModal, $rootScope) { 
    var self = this; 

    self.users = []; 

    self.fetchAllUsers = function() { 
     console.log('----------Start Printing users----------'); 
     for (var i = 0; i < self.users.length; i++) { 
      console.log('FirstName ' + self.users[i].firstName); 
     } 
    }; 
     /** 
    this function will not work 
    **/ 
    self.saveUser = function (user) { 
     self.users.push(user); 
     self.fetchAllUsers(); 
     $log.log("saving user"); 
     $uibModalStack.dismissAll(); 
    }; 

    /** 
    this function works fine 
    **/ 
    self.addNewRow = function() { 
     var specialUser = { 
       id : 12, 
       firstName : 'john', 
       lastName: 'travolta', 
       homeAddress : {location:'chicago'}, 
       email : '[email protected]' 
     }; 
     self.users.push(specialUser); 
     $log.log("saving specialUser"); 
    }; 
    self.openCreateUser = function() { 

     var modalInstance = $uibModal.open({ 
       animation : true, 
       templateUrl : 'createUserContent', 
       controller : 'UserController', 
       resolve : { 
        items : function() { 
         return $scope.items; 
        } 
       } 
      }); 

     modalInstance.result.then(function (selectedItem) { 
      $scope.selected = selectedItem; 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    }; 
    self.fetchAllUsers(); 
});

createUserContent.jsp

<form role="form" ng-controller="UserController as ctrl" > 
    <div class="form-group"> 
     <label for="FirstName">FirstName</label> <input type="FirstName" 
      ng-model="ctrl.user.firstName" class="form-control" 
      id="FirstName" placeholder="Enter FirstName" /> <label 
      for="lastName">lastName</label> <input type="lastName" 
      class="form-control" id="lastName" 
      ng-model="ctrl.user.lastName" placeholder="Enter lastName" /> 
     <label for="email">Email address</label> <input type="email" 
      ng-model="ctrl.user.email" class="form-control" id="email" 
      placeholder="Enter email" /> 
    </div> 
    <div class="form-group"> 
     <label for="homeAddressLocation">Home Address</label> <input class="form-control" 
      ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation" 
      placeholder="homeAddressLocation" /> 
    </div> 
    <div class="form-group"> 
     <label for="SSOId">SSOId</label> <input class="form-control" 
      ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" /> 
    </div> 
    <button type="submit" class="btn btn-default" 
     ng-click="ctrl.saveUser(ctrl.user)">Save</button> 
    <button type="submit" class="btn btn-default">Cancel</button> 
</form>

fonte

2016-03-31 BenMansourNizar

A causa del vostro modello modale non può accedere al UserController oggetto e non mostra errore perché si utilizza d nel modello modale stesso controlle r così ricaricato come nuovo Ctrl non si riferisce genitore Ctrl.

Tuttavia meglio utilizzo diverso controllore e passaggio genitore controllore oggetto modale controllore quindi corpo modale può utilizzare tutti oggetto principale. quindi è necessario passare l'oggetto padre al controller modale.

Quando si include createUserContent.jsp file di popup nel file principale quindi non c'è bisogno di utilizzare ng-controller="UserController as ctrl" nel modello modale utilizzato nel modalInstance controller : 'Ctrl',

come:

var modalInstance = $uibModal.open({ 
     templateUrl: 'createUserContent.jsp', 
     controller: 'ModalCtrl', // ModalCtrl for modal 
     controllerAs:'modal', // as modal so no need to use in modal template 
     size: 'lg', 
     resolve: { 
     items: function() { 
      return $scope.items; 
     }, 
     parent: function(){ // pass self object as a parent to 'ModalCtrl' 
       return self; 
     } 
     }

e ModalCtrl come:

.controller('ModalCtrl', ['parent', function (parent) { 
    this.parent = parent; 
}]);

qui utilizzato ModalCtrl per modale come modal in modo da poter accedere oggetto padre come: modal.parent.user

modello come:

<form role="form" > 
    <div class="form-group"> 
    <label for="FirstName">FirstName</label> <input type="FirstName" 
ng-model="modal.parent.user.firstName" class="form-control" 
id="FirstName" placeholder="Enter FirstName" /> 
     ..... 
     .... 
    <button type="submit" class="btn btn-default" 
ng-click="modal.parent.saveUser(modal.parent.user)">Save</button> 
    <button type="submit" class="btn btn-default">Cancel</button> 
    </form>

Maggiori dettagli Visit PLUNKER DEMO

fonte

2016-04-03 19:54:37

solo una parola perfetto – BenMansourNizar

:) perfetto uomo :) Grazie mille – BenMansourNizar

Siete i benvenuti e possono accetta la mia soluzione se ti ha aiutato :) @ BenMansourNizar –

perché Ng Repeat non funziona se il pulsante viene richiamato da un modulo diverso?

risposta

Problemi correlati