Warum Ng Repeat funktioniert nicht, wenn die Schaltfläche aus einem anderen Formular aufgerufen wird?

Ich habe eine HTML-Tabelle, die eine ng repeat-Direktive und zwei button.The erste enthält, öffnet ein Modal, das ein neues Formular enthält und lassen Sie mich meinen Benutzer erstellen und dann, wenn ich auf Speichern klicken, wird es der Liste hinzufügen der zweite ist in der gleichen ursprünglichen Form und fügt den Benutzer hinzu.Warum Ng Repeat funktioniert nicht, wenn die Schaltfläche aus einem anderen Formular aufgerufen wird?

Was ich nicht verstanden habe, warum, wenn ich auf die erste Taste klicke, die in einer anderen Form ist, kann ich die ng Wiederholung nicht wiederholen, aber für die zweite ist es möglich. Dieser ist der Code:

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>

Quelle

2016-03-31 BenMansourNizar

Aufgrund Ihrer modalen Vorlage kann nicht Ihren Zugang UserController Objekt und zeigt keinen Fehler, weil Sie verwenden d in modalen Vorlage gleichen controlle r so neu wie neu Ctrl verweist nicht auf Eltern Ctrl.

jedoch besser verschiedene Controller bedienen und übergeordneten Controller Objekt übergeben Controller und dann modal Körper alle übergeordneten Objekt verwenden kann modal. Daher sollten Sie das übergeordnete Objekt an den modalen Controller übergeben.

Wenn Sie createUserContent.jsp Popup-Datei in Ihrer Hauptdatei enthalten dann keine Notwendigkeit ng-controller="UserController as ctrl" in Ihrer modalen Vorlage verwenden Sie in modalInstance verwendet controller : 'Ctrl',

wie:

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

und ModalCtrl wie:

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

hier verwendet ModalCtrl für modale wie modal so können Sie übergeordnete Objekt zugreifen wie: modal.parent.user

Vorlage wie:

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

Mehr Details Visit PLUNKER DEMO

Quelle

2016-04-03 19:54:37

nur ein Wort perfekt :) – BenMansourNizar

perfekten Mann :) vielen Dank – BenMansourNizar

Sie sind willkommen und können akzeptiere meine Lösung, wenn es dir geholfen hat :) @BenMansourNizar –

Warum Ng Repeat funktioniert nicht, wenn die Schaltfläche aus einem anderen Formular aufgerufen wird?

Antwort

Verwandte Themen