javascript - Angular - modal MdDialog local controller vs. app level display shadow -
i have been trying use app level controller display modal dialog. tests of local function controller work perfectly, app level controller displaying grey shadow rather dialog desired.
the results of edit , delete (in example) should behave same, not.
thanks in advance.
index.html
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>sandbox angular</title> <!-- bootstrap core css --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!-- content css --> <link rel="stylesheet" href="content/angular-material.css"> <link rel="stylesheet" href="content/ui-grid.css"> </head> <!--<body ng-app="mainapp">--> <body> <div class="container"> <div ng-controller="headergridctrl"> <div class="grid" ui-grid="gridoptions" ui-grid-edit ui-grid-resize-columns></div> </div> </div> <!-- /.container --> <script src="scripts/angular.js"></script> <script src="scripts/angular-material/angular-material.js"></script> <script src="scripts/angular-animate/angular-animate.js"></script> <script src="scripts/angular-aria/angular-aria.js"></script> <script src="scripts/ui-grid.js"></script> <script src="app/app.module.js"></script> </body> </html> testedit.html
<md-dialog> <div> <form ng-cloak> <md-toolbar> <div class="md-toolbar-tools"> <h2>{{firstname}} {{lastname}} ({{action}})</h2> <span flex></span> </div> </md-toolbar> <md-dialog-content> <div class="md-dialog-content"> <p> life's actions....make sure juice worth squeeze. </p> </div> </md-dialog-content> </form> </div> testdelete.html
<md-dialog> <div ng-controller="detailrecordctrl"> <form ng-cloak> <md-toolbar> <div class="md-toolbar-tools"> <h2>{{firstname}} {{lastname}} ({{action}})</h2> <span flex></span> </div> </md-toolbar> <md-dialog-content> <div class="md-dialog-content"> <h2>{{firstname}} {{lastname}} ({{action}})</h2> <p> life's actions....make sure juice worth squeeze. </p> </div> </md-dialog-content> </form> </div> app.module.js
(function () { 'use strict'; //,'ui.router''nggrid' var app = angular.module('app', ['ngmaterial', 'ui.grid', 'ui.grid.resizecolumns']); app.controller('detailrecordctrl', ['$scope', '$mddialog', 'action', 'currentrow', initdetail]) app.controller('headergridctrl', ['$scope', '$mddialog', initgrid]); app.controller('testdialogctrl', ['$scope', '$mddialog', initmodaltest]); //--------------------------------- app.run([function () { /* run when app gets kicked off*/ console.log("run processed"); }]) //--------------------------------- function initdetail($scope, $mddialog, action, currentrow) { $scope = $scope; $scope.action = action; $scope.firstname = currentrow.entity.firstname; $scope.lastname = currentrow.entity.lastname; $scope.closedialog = function () { $mddialog.hide(); }; } //--------------------------------- function initgrid($scope, $mddialog) { var currentrow = 0; $scope.showdelete = function (ev, keyaction, row) { $mddialog.show({ locals: { action: keyaction, currentrow: row }, controller: 'detailrecordctrl', scope: $scope, preservescope: true, targetevent: ev, clickoutsidetoclose: true, skiphide: true, fullscreen: $scope.customfullscreen // -xs, -sm breakpoints. }) }; $scope.showedit = function (ev, keyaction, row) { $mddialog.show({ locals: { action: keyaction, currentrow: row }, controller: localdetailrecordctrl, templateurl: 'testedit.html', scope: $scope, preservescope: true, arialabel: 'edit record', targetevent: ev, clickoutsidetoclose: true, fullscreen: $scope.customfullscreen // -xs, -sm breakpoints. }) }; $scope.editicon = '<button class="md-primary md-raised" ng-click="grid.appscope.showedit($event,\'edit\',row)">edit</button> '; $scope.deleteicon = '<button class="md-primary md-raised" ng-click="grid.appscope.showdelete($event,\'delete\',row)">delete</button>'; $scope.info = [{ firstname: "jimmy", lastname: "john", grade: '1st', contributionday01: 5.12, total: 0 }, { firstname: "jane", lastname: "pauley", grade: '2nd', contributionday01: 4, total: 0 }, { firstname: "andrea", lastname: "kragel", grade: '3rd', contributionday01: 11.28, total: 0 }, { firstname: "zebra", lastname: "zoo", grade: 'pk', contributionday01: 19.23, total: 0 }, { firstname: "jaguar", lastname: "meowser", grade: 'k', contributionday01: 25, total: 0 }]; $scope.gridoptions = { data: 'info', enablefiltering: true, enablecolumnresizing: true, enablesorting: false, enablerowheaderselection: true, enablecolumnmenus: true, enablecelleditonfocus: true, enablerowselection: true, enablecelledit: true, nounselect: false, celltemplate: '<div ng-repeat="col in renderedcolumns"></div>', columndefs: [ { field: 'wrkdisplay', displayname: 'actions', enablecelledit: false, width: '*' , celltemplate: '<div class="testclass">' + $scope.editicon + ' ' + $scope.deleteicon + ' ' + '</div>' }, { field: 'firstname', displayname: 'first name', enablecelledit: true, minwidth: 100, }, { field: 'lastname', displayname: 'last name', enablecelledit: true, minwidth: 100 }, { field: 'grade', displayname: 'grade', enablecelledit: true, minwidth: 70 }, { field: 'getfullname()', displayname: 'teacher', enablecelledit: true, minwidth: 100 }, { field: 'contributionday01', displayname: 'day1', enablecelledit: true, minwidth: 50, cellfilter: 'number: 2' }, { field: 'gettotal()', displayname: 'total', enablecelledit: false, cellfilter: 'currency' }] }; //calaculated fields angular.foreach($scope.info, function (row) { row.gettotal = function () { return this.contributionday01 * 11; } row.getfullname = function () { return (this.firstname + ' ' + this.lastname); } }); function localdetailrecordctrl($scope, $mddialog, action, currentrow) { $scope.action = action; $scope.firstname = currentrow.entity.firstname; $scope.lastname = currentrow.entity.lastname; $scope.closedialog = function () { $mddialog.hide(); } }; } })();
issue resolved after looking @ angular $mddialog documentation n-th time.
the controller listed under $mddialog.show method can declared both or without quotes.
- without quotes uses local $scope function defined.
- with quotes uses app level controller [i.e. app.controller(...)] additionally, template / templateurl can used.
this enables me have single html detail record page can accessed multiple data points if necessary.
Comments
Post a Comment