CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Shashi
Shashi

Reputation: 1182

Angular expression not evaluating for text/ng-template

Here's the sample http://codepen.io/anon/pen/ZWrNGW.

<body layout="column" ng-controller="AppCtrl">
     <script type="text/ng-template" id="save-dialog.tmpl.html">
      <md-dialog>{{message}}</md-dialog>
    </script>
    <md-button ng-click="showDialog()">
      Show Dialog</md-button>
  </body>

Controller

angular.module('playground', ['ngMaterial'])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.showDialog = function() {
    $mdDialog.show({templateUrl: 'save-dialog.tmpl.html'})
  };
  $scope.message = 'This message should idsplay on dialog';
});

Angular expression for {{message}} doesn't evaluate for text/ng-template on click of "Show Dialog" button even though its defined in the scope.

Please help me with this

Upvotes: 1

Views: 303

Answers (2)

scyrizales
scyrizales

Reputation: 134

You need to add the scope to the opening of the dialog:

$mdDialog.show({
  templateUrl: 'save-dialog.tmpl.html',
  scope: $scope
})

Upvotes: 0

dfsq
dfsq

Reputation: 193311

Make sure you configure the scope to inherit from, otherwise $mdDialog service will create a new isolated scope and of course there will be no message property.

Correct code in your case:

$mdDialog.show({
  templateUrl: 'save-dialog.tmpl.html',
  scope: $scope
});

Upvotes: 0

Related Questions