Javascript 如何使用AngularUI引导模式在AngularJS中获取$Scope处的字段_Javascript_Angularjs_Angular Ui_Angular Ui Bootstrap

Javascript 如何使用AngularUI引导模式在AngularJS中获取$Scope处的字段

javascript angularjs

Javascript 如何使用AngularUI引导模式在AngularJS中获取$Scope处的字段,javascript,angularjs,angular-ui,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui,Angular Ui Bootstrap,modallocontroller.js angular.module('App') .controller('modalLoginController', function ($modal, $scope, loginService) { $scope.userName = null; $scope.userPassword = null; $scope.open = function (size) { var modalInstance = $modal

modallocontroller.js

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

。。。
...
...
登录
登录
取消
乌苏里奥洛加多
...
...
...
登录
...
...
...

为什么即使我可以使用$scope.ok和$scope.cancel，也无法获取ModalInstanceCtrl中定义的$scope.userName和$scope.userPassword？

仅针对文本，我将$scope.userName和$scope.userPassword作为loginDto放在解析中，但不起作用。
模态控制器有自己的作用域。您尚未在其中定义
$scope.username
您需要从注入的
loginDto
对象访问这些
尝试：

$scope.userName = loginDto.userName;