角型ブートストラップモーダルコントローラは動作しません

Question

モーダルダイアログを表示する角度アプリがあり、私はコントローラの機能を動作させることができません。ここに私のアプリの定義は次のとおりです。

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> 

Answer 1

にですメソッドを$scopeに追加しているためです。 controllerAs構文を使用しているときは、この操作を行わないでください。 AddUserModalCtrlの機能には、this.の表記法を使用する必要があります。

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