angular bootstrap modal controllerAs funktioniert nicht

Question

Ich habe eine eckige App, die einen modalen Dialog zeigt und ich kann nicht die controllerAs Funktionalität zu arbeiten. Hier ist meine App Definition:

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

Hier ist mein Controller, der die modal und den Controller an den modalen

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

Und hier ist der modale html gebunden ruft:

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

Answer 1

Es ist weil Sie die Methoden zu $scope hinzufügen. Sie tun das nicht, wenn Sie controllerAs Syntax verwenden. Sie sollten this. Notation für Ihre Funktionen in AddUserModalCtrl verwenden.

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