CODEWITHSUNDEEP
javascriptangularjsng-dialog
Egli Becerra
Egli Becerra

Reputation: 1040

AngularJs: Passing a value to a directive that opens an ngDialog then have the value updated reflect back in root scope

Been going on around this for a while; Basically I have a directive that opens up an ngDialog, this directive needs to be able to take a variable from the root scope. The directive basically has a click event that opens an ngDialog this ngDialog then uses the value passed in and sets it as the text of a textbox... once the textbox in the ngDialog is updated it should reflect the change on the root scope.

My problem The value being passed in is not linked to the rootscope, once the value is updated in the ngDialog it does not reflect back to the root scope I'm pretty sure I just made a basic mistake can anyone please give a helping hand?

//The Html

<b>Instructions: </b>Click on the blue items to open ngDialog<br /><br />
<div ng-controller="MyCtrl">
    <b>Base $scope.variable1 = </b> {{variable1}}
    <span pass-object passed-object="variable1"></span><br />
    <b>Base $scope.variable2 = </b> {{variable2}}
    <span pass-object passed-object="variable2"></span><br />
    <b>Base $scope.variable3 = </b> {{variable3}}
    <span pass-object passed-object="variable3"></span><br />
</div>

//The Js

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

myApp.controller('MyCtrl', function ($scope) {
    //Lets say i have 3 scope variables
    $scope.variable1 = "value 1";
    $scope.variable2 = "value 2";
    $scope.variable3 = "value 3";
});

//Now i want to create a directive that opens up a ngdialog, I need to be able to pass in a scope variable into this directive
//and from inside the ngDialog i need to be able to update the variable passed in, and have it reflect from the root scope.
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value passed into this directive = {{passedObject}}!</div>",
        link: function($scope, element){
            element.on('click',function(){
                ngDialog.open({
                    template: '<div>By updating i need it to reflect in the root scope:<br /><br />' + 
                              '<input type="text" ng-model="passedObject"/></div>',
                    plain: true,
                    scope: $scope,
                    controller: ['$scope', function($scope){
                        $scope.$watch('passedObject', function(passedObject){
                            //What do i need to do? it seems like the scope at this level is updating how come the parent is not?
                            alert('updated with: ' + passedObject);
                            $scope.$apply();
                        });
                    }]
                })
            });
        }
    };
}]);

//The Fiddle

http://jsfiddle.net/Egli/od8a2hL0/

//The Gratitude :D

Thanks in advanced

Upvotes: 2

Views: 4726

Answers (1)

Marian Ban
Marian Ban

Reputation: 8188

the console says $digest already in progress, just remove the $scope.$apply();

http://jsfiddle.net/usmoetyd/

you have to use objects instead of primitive types:

myApp.controller('MyCtrl', function ($scope) {
    //Lets say i have 3 scope variables
    $scope.variable1 =  { value : "value 1" };
    $scope.variable2 =  { value: "value 2" };
    $scope.variable3 =  { value: "value 3" };
});



//Now i want to create a directive that opens up a ngdialog, I need to be able to pass in a scope variable into this directive
//and from inside the ngDialog i need to be able to update the variable passed in from the root scope.
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value passed into this directive = {{passedObject.value}}!</div>",
        link: function($scope, element){             


            element.on('click',function(){             


                ngDialog.open({
                    template: '<div>By updating i need it to reflect in the root scope:<br /><br />' + 
                              '<input type="text" ng-model="passedObject.value"/></div>',
                    plain: true,
                    scope: $scope,
                    controller: ['$scope', function($scope){
                        $scope.$watch('passedObject', function(passedObject){
                            //What do i need to do? it seems like the scope at this level is updating how come the parent is not?
                            console.log(passedObject);                                
                        });

                    }]
                })

            });
        }
    };
}]);

http://jsfiddle.net/jyk6Lbwe/1/

read this question for detailed explanation: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Upvotes: 4

Related Questions