Binding from modal Angularjs

Question

I pass the link of this example, I have a variable called "greeting" that changes its value in a modal window but does not bind. Do not share scope?

http://jsfiddle.net/Bibidesign/Lodkh4jy/7/

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
  $scope.greeting = 'Hello!';


  $scope.changeValues = function() {

        var modalInstance = $modal.open({

            templateUrl: 'myModalContent.html',

            backdrop: 'static',

            scope: $scope, 

            controller: function($scope, $modalInstance) {

                    $scope.greeting = "Welcome";

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

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

            }

        });

    };
}]);

The jsfiddle is working how I would expect to based on the code you shared here and in the fiddle. What are you expecting to happen, or think should be working differently? — Tyler, May 14 '18 at 20:44
@Tyler I expected all the "$scope.greeting" to change, if in the modal window it is "$ scope.greeting = Welcome" the text of "Hello!" change too to "Welcome" — Bibi, May 14 '18 at 21:09
When I open the modal window the text of Hello! change to Welcome — Bibi, May 14 '18 at 21:19
I thought so. The problem is, both `$scope.greeting` variables are on two different scopes. When you declare a controller for your modal and give it a `$scope` parameter, it is creating a new `$scope`, one level above the `$scope` from your `GreetingController`. What is the actual goal you are trying to achieve? From the modal name, my guess is you want to have a modal that opens and changes the value of a variable? — Tyler, May 14 '18 at 21:22

score 0 · Answer 1 · answered May 14 '18 at 20:27

0

You can't url refer the text/ng-template as the templateUrl. Instead, add the html form in a separate html file and refer to that in the modal declaration.

Here's a working plunker https://plnkr.co/edit/lMZK0uGNsEmRjAN7teVZ?p=preview

answered May 14 '18 at 20:27

Marcus Höglund

16,172
11
47
69

Tyler · Accepted Answer · 2018-05-14T22:02:58.303

You are partially there. We just need to set up passing the variables between the GreetingController and the Modal controller. We will use the resolve property on the object passed into $modal.open() to pass a value to the modal controller, and than when we close the modal, we will pass back the new value through those the results object. We are also removing scope: $scope, because the controller declaration is overriding that scope copy, and we want to keep these scopes separate. Example to follow.

This answer has a more thorough explanation of what is happening with the resolve, but it is essentially just a simplified way to resolve promises and guarantee data is in the controller before initializing the modal.

myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
    $scope.greeting = 'Hello!';


    // this will handle everything modal
    $scope.changeValues = function() {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            backdrop: 'static',
            // resolve is an object with all the objects we will pass to the controller
            // I'm adding more than just greeting for examples sake
            resolve: {
                greeting: function () {
                    return $scope.greeting;
                },
                testData: function () {
                    return "This is some random test data";
                }
            }
            // on the controller parameters, we add the properties we are resolving
            controller: function($scope, $modalInstance, greeting, testData) {

                // the greeting variable passed in through resolve
                console.log('greeting', greeting); // expected output: greeting Hello!
                // the testData passed in through resolve
                console.log('testData', testData); // expected output: testData This is some random test data

                // this will be the greeting you are able to access on the modal
                // we can set this to the value from the resolve or a new value like below
                $scope.greeting = "Welcome";
                //$scope.greeting = greeting // this will set the modal to the value passed in from the resolve

                // NOTE*** I changed this call to dismiss()
                $scope.cancel = function(){
                    modalInstance.dismiss();
                }  

                $scope.ok = function(){
                    // what ever we pass in to close will be accessible in the result below
                    // we are passing in the new greeting - 'Welcome'
                    modalInstance.close($scope.greeting);
                }                
            }
        });

        // this is the majority of the new code
        modalInstance.result.then(function(okReturnObject){
            // this okReturnObject will be whatever you pass in to modalInstance.close()
            console.log('return', okReturnObject); // expectedOutput: return Welcome

            // this is where we are setting the original value to the new value from the modal
            $scope.greeting = okReturnObject;
        },function(){
            // will be run after modalInstance.dismiss()
            console.log("Modal Closed");
        });
    };
}]);

Binding from modal Angularjs

2 Answers2