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...

I think you would have to inject "value" into your TextEntryModalCtrl as well. — Patrick
– Patrick, Commented Apr 29, 2014 at 19:54
You may need to inject the value object as well as the $scope and $modalInstance services - like ["$scope", "$modalInstance", "value", function($scope, $modalInstance, value){ — Matt M
– Matt M, Commented Apr 29, 2014 at 19:55
Hahahaha holy crap that's all it was. I've been banging my head against this thing for hours. Ugh. Thank you very much! — jmarkyston
– jmarkyston, Commented Apr 29, 2014 at 19:56

jmmygoggle · Accepted Answer · 2016-06-24 01:17:24Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related