2015-10-21 57 views
1

我有一個帶有用戶的主要用戶頁面,如果您選擇一個用戶,則會打開一個模式並顯示用戶信息。Modal上的控制器在AngularJS上不起作用

問題是$範圍似乎沒有工作,因爲它不顯示模態上的用戶數據。但是,如果我在主要用戶頁面的任何地方顯示用戶數據,它就可以正常工作。

我有這樣的控制器:

function userController($scope, $modal, $http, $rootScope) { 
    var usrCtrl = this; 
    $scope.users = null; 
    $scope.openUserForm = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'views/modal_user_form.html', 
      controller: userController, 
      windowClass: "animated flipInY" 
     }); 
    }; 

var session = JSON.parse(localStorage.session); 
$http({ 
method: 'GET', 
url: $rootScope.apiURL+'getAllClientUsers/'+session, 
headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}).success(function(response){ 
    if(response.ErrorMessage === null && response.Result !== null){ 
     $scope.users = response.Result; 
    } 
}); 

//**This is the code that opens the modal 
$scope.editViewUser = function(user){ 
    for (var key in $scope.users) { 
     if($scope.users[key].SecUserId === user){ 
      $scope.selectedUser = $scope.users[key]; 
     } 
    } 
    $scope.openUserForm(); 
}; 

};

而這種模式:

<div ng-controller="userController"> 
<div class="inmodal"> 
    <div class="modal-header"> 
     <h4 class="modal-title">Create or Edit User</h4> 
     <small class="font-bold">Use this modal to create or edit a user</small> 
    </div> 
    <div class="modal-body"> 

     <form method="get" class="form-horizontal"> 
         <div class="form-group"><label class="col-sm-2 control-label">Nombre</label> 
          <div class="col-sm-10"><input ng-model="selectedUser.FirstName" type="text" class="form-control"></div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Apellido</label> 
          <div class="col-sm-10"><input ng-model="selectedUser.LastName" type="text" class="form-control"></div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Usuario</label> 
          <div class="col-sm-10"><input ng-model="selectedUser.UserName" type="text" class="form-control"></div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Email</label> 
          <div class="col-sm-10"><input ng-model="selectedUser.Email" type="email" class="form-control"></div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Activo</label> 
          <div class="col-sm-10"> 
           <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div> 
          </div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Email Verificado</label> 
          <div class="col-sm-10"> 
           <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div> 
          </div> 
         </div> 
         <div class="form-group"><label class="col-sm-2 control-label">Privilegios</label> 
          <div class="col-sm-10"> 
           <select class="form-control m-b" name="account"> 
            <option ng-repeat="priv in selectedUser.EffectivePrivileges">{{ priv }}</option> 
           </select> 
          </div> 
         </div> 
        </form> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-white" ng-click="cancel()">Close</button> 
     <button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button> 
    </div> 
</div> 
</div> 

我試圖注入控制器,並採用NG-控制器和scope屬性的模式。

我錯過了什麼?

+0

它拋出一個錯誤? – rneves

+0

不,它不會拋出錯誤。 – Multitut

回答

3

問題是模態模板編譯的範圍不會從您的$scope繼承。爲了使它們之間的連接,你可以告訴模式來創建範圍的一個新的子範圍:

$scope.openUserForm = function() { 
    var modalInstance = $modal.open({ 
     scope: $scope, // <----- add this instruction 
     templateUrl: 'views/modal_user_form.html', 
     controller: userController, 
     windowClass: "animated flipInY" 
    }); 
}; 
1

一般來說,模式將有其自己的控制器,而不是指向其從所謂的控制器。您可以將模型(selectedUser)注入到模態控制器中,然後將其傳遞給父代。此外,您可以讓用戶選擇取消,在這種情況下,不會對父控制器型號進行更改。

模態控制器:

app.controller('UserModalController', [ 
    '$scope', 
    '$modalInstance', 
    'selectedUser', 
    function ($scope, $modalInstance, selectedUser) { 

    $scope.selectedUser = selectedUser; 

    $scope.cancel= function() { 
     // user cancelled, return to parent controller 
     $modalInstance.dismiss('cancel'); 
    }; 

    $scope.save = function() { 
     // close modal, return model to parent controller 
     $modalInstance.close($scope.selectedUser); 
    }; 

]); 

變更主控制器:

   var modalInstance = $modal.open({ 
        templateUrl: 'views/modal_user_form.html', 
        controller: 'UserModalController', 
        windowClass: "animated flipInY", 
        resolve: { 
        selectedUser: function() { 
         return $scope.selectedUser; 
        } 
        } 
       }); 

       modalInstance.result.then(function(updatedUser) { 
        // deal with updated user 
       }, function() { 
        // modal cancelled 
       });