使用角材料

Question

This is a small project just for learning purposes.

The objective is that when I click in the + button in front of the name of the game, the AngularJS material popup show up. Its working, but I want it to work for the different games. With a different HTML template correspondent to the game I click.

Here is my project.

https://github.com/hseleiro/myApp

index.html

<div ng-view>

</div>

assets/js/mainApp.js

var stuffApp = angular.module('myApp',   ['ngAnimate','ngRoute','ngMaterial','ui.bootstrap.tpls','ui.bootstrap']);

stuffApp.config(function ($routeProvider) {

$routeProvider

    // route for the home page
    .when('/',

    {
        templateUrl: 'pages/home.html',
        controller: 'mainController',
    })

    .when('/games',

    {
        templateUrl: 'pages/games.html',
        controller: 'mainController'
    })

    })

    stuffApp.controller('mainController', function ($scope,$mdDialog){

    $scope.query = {}
    $scope.queryBy = '$'
    $scope.games = [

    { 
    "name" : "BloodBorne",
    "consola" : "Playstation 4"
    },
    { 
    "name" : "Mass Efect 3",
    "consola" : "Xbox 360"
    },
    { 
    "name" : "Pro Evolution Soccer 6",
    "consola" : "Xbox 360"
    }

    ];

    $scope.showAdvanced = function(ev) {
    $mdDialog.show({
    controller: DialogController,
    templateUrl: 'pages/dialog1.tmpl.html',
    targetEvent: ev,
    clickOutsideToClose:true
    })

    };

    function DialogController($scope, $mdDialog) {
    $scope.answer = function(answer) {
    $mdDialog.hide(answer);

    };
    }              
  });

pages/games.html

<div class="container">
    <div class="row">
        <div class="titulo">
            <div class="col-sm-4"></div>
                <div class="col-sm-4">
                        <h1><i class="fa fa-gamepad fa-4x"></i></h1>
                </div>
            <div class="col-sm-4"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">
            <div class="search_icon">
                <h4><i class="fa fa-search fa-4x"></i></h4> 
            </div>              
        </div>      
        <div class="col-sm-11">
            <div class="search_bar">
                <div><input class="form-control" ng-model="query[queryBy]" /></div>
            </div>              
        </div>
    </div>


    <hr>

    <div>
        <table class="table">
            <tr>
                <th>Nome</th>
                <th>Consola</th>

            </tr>
            <tr ng-repeat="game in games | filter:query">

                <td>{{game.name}}<md-button class="md-primary" ng-click="showAdvanced($event)">
                     <i class="fa fa-plus"></i>
                </md-button></td>
                <td>{{game.consola}}</td>

            </tr>
        </table>
    </div>

</div>

pages/dialog1.tmpl.html

<md-dialog aria-label="">
<form>
<md-dialog-content class="sticky-container">
<md-subheader class="md-sticky-no-effect"></md-subheader>
<div>
  <p>
    Test
  </p>
  <img style="margin: auto; max-width: 100%;" alt="Lush mango tree"  src="assets/img/bloodborne.jpg">
  <p>
    Test
  </p>
  <p>
    Test
  </p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="answer('useful')" class="md-primary">
  Close
</md-button>
</div>
</form>
</md-dialog>

Could some one help me ? Thanks

Answer 1

Sounds like you need to parameterize the controller and template you pass to $mdDialog.

For example:

$scope.showAdvanced = function(ev, popupIdentifier) {
    $mdDialog.show({
    controller: popupIdentifier + 'Controller',
    templateUrl: 'pages/' + popupIdentifier + '.tmpl.html',
    targetEvent: ev,
    clickOutsideToClose:true
    })

    };

and then simply call the function with whatever popup content you need:

$scope.showAdvanced($event, 'Game1');