2016-07-25 2 views
1

저는 모달 대화 상자를 보여 주며 작동 할 수있는 컨트롤러 기능을 얻을 수 없습니다. 여기 앵귤러 부트 스트랩 모달 컨트롤러가 작동하지 않습니다

var deps = ['ngResource', 'ngRoute', 'swaggerUi', 'http-auth-interceptor', 'ngAnimate', 'angular-spinkit', 'ui.bootstrap']; 
var myapp = angular.module('myApp', deps); 

모달과 모달 여기

myapp.controller('UsersController', ['$scope', '$log', '$uibModal', 'UsersService', function ($scope, $log, $uibModal, UsersService) { 
    $scope.users = UsersService.getAll(); 
    $scope.openAddUserModal = function() { 
     $uibModal.open({ 
      animation: false, 
      templateUrl: 'partials/addUserModal.html', 
      /* I've even tried controller:'AddUserModalCtrl as addUserModalCtrl' */ 
      controller: 'AddUserModalCtrl', 
      controllerAs: 'addUserModalCtrl', 
      bindToController: true 
     }); 
    }; 
}]).controller('AddUserModalCtrl', ['$scope', '$log', '$uibModalInstance', function ($scope, $log, $uibModalInstance) { 
    $scope.cancel = function() { 
     console.log('userToAdd: ' + JSON.stringify($scope.userToAdd)); 
     $uibModalInstance.dismiss('cancel'); 
    }; 
    $scope.addUser = function() { 
     console.log($scope.username); 
    } 
}]) 

그리고 바인딩 컨트롤러를 호출 내 컨트롤러입니다 모달 HTML됩니다 :

<div class="modal-header"> 
    <h3 class="modal-title">Add new user</h3> 
</div> 
<div class="modal-body"> 
    <form role="form"> 
     <button ng-click="addUser()" type="submit" class="btn btn-default">Submit</button> 
     <!-- this works if I remove the 'addUserModalCtrl' --> 
     <button ng-click="addUserModalCtrl.cancel()" type="submit" class="btn btn-default">Cancel</button> 
    </form> 
</div> 

답변

2

그것은이다 여기에 내 응용 프로그램의 정의는 메소드를 $scope에 추가하기 때문입니다. controllerAs 구문을 사용할 때는 그렇게하지 않습니다. AddUserModalCtrl에서 함수에 대해 this. 표기법을 사용해야합니다.

this.cancel = function() { 
    console.log('userToAdd: ' + JSON.stringify(this.userToAdd)); 
    $uibModalInstance.dismiss('cancel'); 
}; 
this.addUser = function() { 
    console.log(this.username); 
} 
+0

고맙습니다! –

관련 문제