如何使用AngularUI引導模態

modalLoginController.js如何使用AngularUI引導模態

angular.module('App') 
    .controller('modalLoginController', function ($modal, $scope, loginService) { 

    $scope.userName = null; 
    $scope.userPassword = null; 

    $scope.open = function (size) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'modalLogin.html', 
     controller: ModalInstanceCtrl, 
     size: size, 
     resolve: { 
     loginDto: function() { 
      var login = {}; 
      login.userName = $scope.userName; 
      login.userPassword = $scope.userPassword; 

      return login; 
     } 
     } 
    }); 
    }; 

    var ModalInstanceCtrl = function ($scope, $modalInstance, $window, loginDto) { 

    $scope.ok = function() { 
     var login = {}; 
     login.userName = $scope.userName; 
     login.userPassword = $scope.userPassword; 

     $window.alert(login.userName + ' ' + login.userPassword); 

     var response = loginService.validateLogin(loginDto); 
     if (response.success) { 
     $modalInstance.close(); 
     } else { 
     $window.alert('zebrero'); 
     } 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 

    }; 

});

的Index.html

... 
... 
... 
<script type="text/ng-template" id="modalLogin.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Login</h3> 
    </div> 
    <div class="modal-body"> 
     <input type="text" ng-model="userName" placeholder="user"/> 
     <input type="password" ng-model="userPassword" placeholder="password"/> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" ng-click="ok()">Login</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
    <div class="modal-body" ng-show="isLogged"> 
     <label>Usuário Logado</label> 
    </div> 
</script> 

</head> 
<body ng-controller="MainCtrl"> 
... 
... 
... 
    <div id="loginLogout" ng-controller="modalLoginController"> 
     <button class="btn btn-default" ng-click="open('sm')" modalLogin ng-show="!isLogged" >Login</button> 
    </div> 
... 
... 
...

爲什麼我不能得到$範圍得到AngularJS在$範圍領域。 userName和$ scope.userPassword在ModalInstanceCtrl中定義，即使我可以使用$ scope.ok和$ scope.cancel？只是文字我把$ scope.userName和$ scope.userPassword在決心爲loginDto，但沒有工作過。

來源

2014-07-21 WellMafra

模態控制器有它自己的範圍。您尚未在其中定義$scope.username。

您需要從您注入的loginDto對象訪問這些對象。

嘗試：

$scope.userName = loginDto.userName;

來源

2014-07-21 13:27:01 charlietfl

不工作...我嘗試 – WellMafra

如何使用AngularUI引導模態

回答

相關問題