controllerAs not binding in ui-bootstrap modal

Question

I am refactoring out my controller to controllerAs for my modal. For some reason I cannot get the modal to work with controllerAs in the same manner that it is working with $scope

It seems as simple as setting 1. I name this in the controller 2. calling controllerAs in the return object 3. bindToController: true 4. change ng-click to = ng-click="vm.ok()"

But it is not working

Here is the original with $scope. This directive works just fine.

(function() {
    'use strict';

    angular
        .module('app.components.modal')
        .directive('myModal', myModal);



        function myModal() {
            return {
                restrict: 'E',
                scope: {},
                template: "<button class='btn btn-danger' ng-click='vm.open()'>Beer </button>",
                controller: ModalController,
                controllerAs: 'vm',
                bindToController: true
            }
        }

        function ModalController($modal, $log , $scope) {
            var vm = this;
            $scope.animationsEnabled = true;

            vm.open = open;

            function open() {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'app/components/modal/modal.html',
                    controller: ModalInstanceCtrl,
                    controllerAs: vm,
                    bindToController: true,
                    size: 'lg'
                    // resolve: {
                    //  title: function() {
                    //      return 'training Info';
                    //  }
                    // }            
                });
                modalInstance.result.then(function(selectedItem) {
                    console.log("Confirmed: "+ selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function() {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };
        }

        function ModalInstanceCtrl($scope, $modalInstance) {
            var vm = this;
            $scope.ok = function () {
                // console.log('beer', $scope.beer);
                // console.log('IBU',$scope.IBU);

                console.log('clicked');
               // $modalInstance.close($scope.selected.item);
               $modalInstance.close();
            };

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



    })(); // end of iffe statement function

My modal html file represents $scope. This is fine as well

 <div class="modal-header" >
  <button type="button" class="close" ng-click="$hide()">&times;</button>
  <h4 class="modal-title" ></h4>
</div>
<div class="modal-body" >
  <form name="beerForm"> 
    <div class="form-group">
      <label> Beer Name</label>
      <input type="text" class="form-control" placeholder="beer" ng-model="beer.beerName">
    </div>
    <div class="form-group">
      <label> IBU</label>
      <input type="number" class="form-control" placeholder="IBU" ng-model="beer.IBU">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" ng-modal="beer.Name"ng-click="ok()">Cancel</button>
  <button type="button" class="btn btn-danger" ng-modal="beer.IBU" ng-click="cancel()">Confirm</button>
</div>

Now I change the $scope to vm for view model and add vm to the modal buttons like so: vm.ok() vm.cancel() then the buttons longer work.

(function() {
    'use strict';

    angular
        .module('app.components.modal')
        .directive('myModal', myModal);



        function myModal() {
            return {
                restrict: 'E',
                scope: {},
                template: "<button class='btn btn-danger' ng-click='vm.open()'>Beer </button>",
                controller: ModalController,
                controllerAs: 'vm',
                bindToController: true
            }
        }

        function ModalController($modal, $log , $scope) {
            var vm = this;
            $scope.animationsEnabled = true;

            vm.open = open;

            function open() {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'app/components/modal/modal.html',
                    controller: ModalInstanceCtrl,
                    controllerAs: vm,
                    bindToController: true,
                    size: 'lg'
                    // resolve: {
                    //  title: function() {
                    //      return 'training Info';
                    //  }
                    // }            
                });
                modalInstance.result.then(function(selectedItem) {
                    console.log("Confirmed: "+ selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function() {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };
        }

        function ModalInstanceCtrl( $modalInstance) {
            var vm = this;
            vm.ok = function () {
                // console.log('beer', $scope.beer);
                // console.log('IBU',$scope.IBU);

                console.log('clicked');
               // $modalInstance.close($scope.selected.item);
               $modalInstance.close();
            };

            vm.cancel = function () {
                console.log('clicked');
                $modalInstance.dismiss('cancel');
            };
        }

    })(); // end of iffe statement function

There does not seem to be a clear reason that vm.ok() would not work on buttons attached to the modal. I am not getting an error.

Answer 1

The code above is nearly correct. I want to use controllerAs.

The function ModalController has one significant error on it. I am setting var vm = this . Also, I set controllerAs: vm. I needed

************** quotes *************

controllerAs: 'vm'   // this would have been the correct response.


function ModalController($modal, $log , $scope) {
        var vm = this;
        $scope.animationsEnabled = true;

        vm.open = open;

        function open() {
            var modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'app/components/modal/modal.html',
                controller: ModalInstanceCtrl,
                // here is where i should have controllerAs: 'vm'
                controllerAs: vm,
                bindToController: true,
                size: 'lg'
                // resolve: {
                //  title: function() {
                //      return 'training Info';
                //  }
                // }            
            });
            modalInstance.result.then(function(selectedItem) {
                console.log("Confirmed: "+ selectedItem);
                $scope.selectedItem = selectedItem;
            }, function() {
                $log.info('modal dismissed at: ' + new Date());
            });
        };
    }