Struggling with a persistent issue here; Essentially, I have a directive that triggers an ngDialog to open. This directive should be able to receive a variable from the root scope. The directive contains a click event that opens an ngDialog which then uses the passed-in value to populate a textbox... but updates made in the textbox within the ngDialog are not reflecting back on the root scope.
The Challenge The variable being passed does not maintain its link to the rootscope. Updates in the ngDialog don't propagate back to the root scope and I suspect I've overlooked something fundamental. Any assistance would be greatly appreciated.
//HTML Snippet
<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>
//JavaScript Code
var myApp = angular.module('myApp',['ngDialog']);
myApp.controller('MyCtrl', function ($scope) {
//Defining 3 scope variables
$scope.variable1 = "value 1";
$scope.variable2 = "value 2";
$scope.variable3 = "value 3";
});
//Creating a directive for opening an ngDialog that can accept and update a scope variable within it
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
return {
restrict: 'A',
scope: { passedObject: '=' },
template: "<div class='directive'>This directive's received value is = {{passedObject}}!</div>",
link: function($scope, element){
element.on('click',function(){
ngDialog.open({
template: '<div>I want changes in this textbox to reflect in root scope:<br /><br />' +
'<input type="text" ng-model="passedObject"/></div>',
plain: true,
scope: $scope,
controller: ['$scope', function($scope){
$scope.$watch('passedObject', function(passedObject){
//Need to figure out why changes at this level aren't propagating upwards
alert('updated with: ' + passedObject);
$scope.$apply();
});
}]
})
});
}
};
}]);
//Check out the Fiddle for reference
http://jsfiddle.net/Egli/od8a2hL0/
//Many Thanks :D
We appreciate any help offered