Trying to get a string from Angular UI Modal via resolve object

Question

I'm using the Angular UI modal directive: http://angular-ui.github.io/bootstrap/

I'm trying to pass a string from my modal open() function to my modal controller via the resolve object. I feel like I'm doing the right thing, but somehow it isn't working.

Modal open() function:

$scope.showCommentModal = function () {
    var modalInstance = $modal.open({
        templateUrl: "templates/text-entry-modal.html",
        controller: "TextEntryModalCtrl",
        resolve: {
            value: function () {
                alert("VALUE");
                return "Hello"
            }
        }
    });
};

Modal controller:

.controller("TextEntryModalCtrl", ["$scope", "$modalInstance", function ($scope, $modalInstance, value) {
    alert(value);
    $scope.value = value;
    $scope.cancel = function () {
        $modalInstance.dismiss("cancel");
    };
}]);

The alert in the open function shows every time, right before the alert from the controller, so it's doing something, but when it gets to the controller, value is undefined.

One thing to note is that these controllers are not global variables. The example in the link above is using those, but that's not best practice for us.

Also, I have read this post: Angular-ui modal, sending data into modal controller from $http

I feel like this is very close to the answer I'm looking for, but I don't think I'm waiting on a promise to resolve in this case, am I? As far as I can tell, our implementations are very similar, but again I'm not using global variables but they are. Or maybe I just don't understand what's actually going on here. Of course, I don't have enough points to just ask that, so here I am...

Answer 1

Looking at the first line of the modal controller, it appears the array that is the second parameter is missing "value", as the third item in the array (just before the final function in the array). It should be:

.controller("TextEntryModalCtrl", ["$scope", "$modalInstance", "value", function ($scope, $modalInstance, value) {

This particular bit of syntax is using the controller() method to add a constructor function to the TextEntryModalCtrl controller using Angular's inline injection annotation to explicitly specify both the dependencies of your controller along with the constructor function that will ultimately consume those (injected) dependencies.

Though your constructor function was written to consume 3 dependencies, you had only explicitly listed the first 2 dependencies so the value dependency was lost.

https://docs.angularjs.org/guide/controller#setting-up-the-initial-state-of-a-scope-object https://docs.angularjs.org/guide/di#inline-array-annotation