The correct way to inject an angular controller dependency inside an angular.ui modal

Question

following angular.ui Modal example shows the modalInstance calling a ModalIntanceCtrl which is later created as a function:

var Mod         


        

Answer 1

The simple way to do this is use $inject:

    // inject the controller with the following dependencies
    ModalInstanceCtrl.$inject = ['$scope', '$modalInstance', 'items'];

Change the controller method to a named function :

    function ModalInstanceCtrl($scope, $modalInstance, items) {
        $scope.items = items;
        $scope.selected = {
            item: $scope.items[0]
        };

        $scope.ok = function () {
            $modalInstance.close($scope.selected.item);
        };

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

I have written a blog article on this subject and includes how to write tests for directives that use $inject:

transitioning-to-angular-2-0-part-2