UI Bootstrap Modal within Directive

Question

I'm using Angular 1.4.1 and UI Bootstrap 0.13.

I have a directive from which I'm opening a modal. The modal opens fine, but the buttons seemingly don't get bound to their handlers - they don't do anything. I've used this same code in another project just fine, except not from within a directive.

My directive:

(function () {
    var app = angular.module('myApp');

    app.directive('someDirective', function () {
        return {
            restrict: 'E',
            templateUrl: 'SomeDirective.html',
            scope: {
                list1: '=list1',
                list2: '=list2',
                save: '&'
            },
            controller: ['$scope','$modal','myService', function ($scope,$modal,myService) {
                $scope.openModal = function () {
                    var modalInstance = $modal.open({
                        templateUrl: 'ModalTemplate.html',
                        controller: 'modalController',
                        backdrop: 'static',
                        size: 'sm',
                        resolve: {
                            saveData: function () {
                                //do save action
                            }
                        }
                    });

                    modalInstance.result.then(
                        function (itemToSave) {
                            //save item
                        },
                        function () {
                            //Cancel
                        }
                    );
                };
            }]
        }
    });
}());

The modal's controller:

(function() {
    var app = angular.module('myApp');

    app.controller('modalController', [
        '$scope', '$modalInstance', 'saveData',
        function($scope, $modalInstance, saveData) {
            $scope.saveData = saveData;

            $scope.save = function() {
                $modalInstance.close($scope.saveData);
            };

            $scope.cancel = function() {
                $modalInstance.dismiss('cancel');
            };
        }
    ]);
}());

And the template for the modal content:

<div class="modal-header bg-info">
    <h3 class="modal-title">Add New Record</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal" role="form"></form>
</div>
<div class="modal-footer bg-info">
    <button class="btn btn-primary" ng-click="save()">Save</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

My thought is that I'm having issues with scope, but I can't track it down. I have put break points on modalController. The app.controller() call happens when the app loads, I've seen that. But breakpoints within save() and cancel() never get hit.

Can someone help me figure out why the modal's buttons don't do anything?

Here's a fiddle, but it actually works fine there so now I'm doubly stumped... jsfiddle.net/squillman/917w26a4/12 — squillman
– squillman, Commented Aug 13, 2015 at 21:45

squillman · Accepted Answer · 2015-08-13 23:22:08Z

1

This turned out to be a stupid mistake. At some point I apparently overwrote the name of one of the other controllers in my project with the same name of the controller I was using for the modal. The other controller did not have save() or cancel() methods so nothing was happening. As soon as I fixed my error and all controllers once again had their proper names this started working again.

answered Aug 13, 2015 at 23:22

squillman

13.7k3 gold badges45 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

UI Bootstrap Modal within Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related