CODEWITHSUNDEEP
angularjsdialogangular-materialisolate-scope
Arshdeep Singh
Arshdeep Singh

Reputation: 23

md-dialog in Angular Material not accepting isolated scope

I am using Angular Material Dialog to generate popups based on the content of my data.I am using ng-repeat to create buttons on whose click a dialogue is generated. But I am not able to inject individual objects as scope to the controller. Here is the link to the Plunker

The code files are as follows:

app.js

    var app = angular.module('myApp', ['ngMaterial']);
app.controller('mainCtrl', function($scope,$mdDialog) { 
  $scope.siteData = [{
    Name: 'Google',
    URL: 'https://www.google.com'
  }, {
    Name: 'Yahoo',
    URL: 'https://www.yahoo.com'
  }, {
    Name: 'Rediff',
    URL: 'https://www.rediff.com'
  }];
$scope.showDialog = function(ev,scopeObj) {
            $mdDialog.show({
          //template: 'myModal',
          template:  '<md-dialog>' +
                    '  <md-dialog-content>' +
                    ' {{URL}}    ' +
                    '  </md-dialog-content>' +
                    '</md-dialog>',
          scope:scopeObj,
          targetEvent: ev,
          clickOutsideToClose :true,
          preserveScope :true,
          clickOutsideToClose:true,
        });
      };
});

index.html

<html lang="en" ng-app="myApp">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
  <meta name="viewport" content="initial-scale=1" />
</head>
<body  ng-controller="mainCtrl">
  <div ng-repeat="site in siteData">
 <md-button class="md-raised md-primary" ng-click = "showDialog($event,site)">{{site.Name}}</md-button>
  </div>
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
  <script src="app.js"></script>
</body>
</html>

Please suggest any changes to achieve this.

Upvotes: 0

Views: 1001

Answers (2)

Zhe Hu
Zhe Hu

Reputation: 4007

Here is the link to modified Plunk that works as intended. Basically, you inject "locals" in the controller

locals:{URL: scopeObj.URL},
controller: function($scope, URL){$scope.URL = URL;},

and in the controller, get the injected value onto the local $scope.

Upvotes: 1

Rob
Rob

Reputation: 5481

The scope needs to be a "real" scope not just an data object.

You should use a controller to pass the data.

controller: function($scope){ $scope.URL=scopeObj.URL; },

In the docs there is a locals parameter that seems to be an alternative to that but I don't know how/where the values are injected...

locals: scopeObj

Upvotes: 1

Related Questions