CODEWITHSUNDEEP
angularjsangular-materialmddialog
saravanan ls
saravanan ls

Reputation: 1

On mdDialog cant able to assign the scope variable for second time

I'm new to angular material, my problem is i can't able to bind the scope datas for second open of dialog box.

I retrieved data from database assigned to the scope variable and also bound the scope var in md dialog box.(for the first tym it works fyn with no issues) on second cant able to bind the data with md-dialog box

below is my code sample

  var retrieveData = function(){
    var companyUrl =  dbUrl; 
     var request = {
         url:  companyUrl,
           type: "GET",

      };
    $http(request)
            .success(function (retrievedSource){

    // here I am assigning retrieved data to the scope variable 
                 $scope.retrievedSources = retrievedSource;

                }).error(function (){
                 console.log("search failed");
            });
 };



 <md-input-container class="md-icon-float md-block">
<label>Company Name  <span> * </span></label>
<input type="text" ng-required="true" style="width:100%;" name="companyName"  ng-pattern="namePattern" value='{{retrievedSources.companyName}}' />
<span id="companyNameErrorMessages" class="error"></span>

Problem:

value='{{retrievedSources.companyName}}'

this scope assignment has been working properly for the first time once I cancelled the dialog box using the mdDialog cancel I am unable to bind the scope data

$scope.updateCancel = function() {$mdDialog.cancel()};

Upvotes: 0

Views: 1140

Answers (1)

camden_kid
camden_kid

Reputation: 12813

I've created a CodePen with an example of $scope.reterivedSources binding and updating correctly in a md-dialog.

The NEW VALUE button updates $scope.reterivedSources.companyName. I don't know how you have set up your code to display your dialog but note this in my code:

scope: $scope,
preserveScope: true

JS

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.retrievedSources = { companyName: 123 };

  $scope.showDialog = function(ev ,id) {
   $mdDialog.show({
     templateUrl: "test.html",
     parent: angular.element(document.body),
     clickOutsideToClose:true,
     targetEvent: ev,
     controller: materialEditCtrl,
     fullscreen: false,
     scope: $scope,
     preserveScope: true
   });
  };

  $scope.newValue = function () {
    $scope.retrievedSources.companyName = Math.random() * 1000;
  }
});

Markup

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <script type="text/ng-template" id="test.html">
    <md-dialog>
            <md-input-container class="md-icon-float md-block">
            <label>Company Name  <span> * </span></label>
            <input type="text" ng-required="true" style="width:100%;" name="companyName"  ng-pattern="namePattern" value='{{retrievedSources.companyName}}' />
            <span id="companyNameErrorMessages" class="error"></span>
    </md-dialog>
  </script>

  <md-button ng-click="showDialog($event)" class="md-raised md-primary">
    edit
  </md-button>
  <md-button ng-click="newValue()" class="md-raised md-primary">
    new value
  </md-button>
</div>

Upvotes: 2

Related Questions