How do i access ngDialog data property in view

Question

I am using ngDialog.

I am setting its data property value.

Problem: I am not sure how can i access data value in my view.

This is how i am setting ngDialog.openConfirm. myName have value.

ngDialog.openConfirm({
    template: '/dist/Shared/testDialog.html',
    data: myName,
    showClose: false
}).then(function() {
    $window.location.reload();
});

This is how i am trying to use data property in view. It does not work.

<h3 class="modal-title">Hello, {{ngDialog.data}}</h3>

Please advise.

score 2 · Accepted Answer · answered Jan 15 '16 at 09:58

You can share the scope with your ngDialog as shown in the example below:

var app = angular.module('exampleDialog', ['ngDialog']);

app.controller('MainCtrl', function($scope, $rootScope, ngDialog, $timeout) {

  $scope.data = {
    myName: "Peter"
  };

  $scope.openDefault = function() {
    ngDialog.openConfirm({
      template: '/dist/Shared/testDialog.html',
      scope: $scope,
      showClose: false
    });

  };
});

<!doctype html>
<html ng-app="exampleDialog">
<head>
    <meta charset="utf-8">
    <title>ngDialog demo</title>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <link rel="stylesheet" href="//rawgit.com/likeastore/ngDialog/master/css/ngDialog.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//rawgit.com/likeastore/ngDialog/master/css/ngDialog-theme-default.css">
    <script src="//rawgit.com/likeastore/ngDialog/master/js/ngDialog.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

    <button type="button" class="button button-primary" ng-click="openDefault()">Open Modal</button>

    <!-- Templates -->
    <script type="text/ng-template" id="/dist/Shared/testDialog.html">
        <div class="ngdialog-message">
            <h3>ngDialog Id: <code>{{ngDialogId}}</code></h3>
            <label>
               User name:
               <input type="text" name="myName" ng-model="data.myName" required>
            </label>
            <p>myName: <code>{{data.myName}}</code></p>
        </div>
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog()">Close</button>
        </div>
    </script>
    
    <p>myName: <code>{{data.myName}}</code></p>

</body>
</html>

I am using app.factory (angular service) and not controller. so i believe can't use $scope. correct me if i am wrong please. — TheKingPinMirza, Jan 15 '16 at 14:54
Sorry, but I don't understand: are you using ngDialog inside a service? — beaver, Jan 15 '16 at 15:30
Yes i am using ngDialog inside service (infact inside factory). So, i can do that? Any idea please. — TheKingPinMirza, Jan 15 '16 at 16:07
IMO it is not a good practice to use UI components directly inside a Service/Factory; if you check ngDialog doc all the examples use the ngDialog inside a controller (sometimes with a specific controller for it). — beaver, Jan 15 '16 at 16:48
For your convenience I put ngDialog examples in this plunker http://plnkr.co/edit/mMkNGbBhZ8arPlpHUEDN?p=preview — beaver, Jan 15 '16 at 16:50
A more direct way to use ngDialog's `data` property itself (rather than injecting your properties into `scope`) is presented here: http://stackoverflow.com/a/28370541/290343 — Ofer Zelig, May 10 '16 at 06:55

How do i access ngDialog data property in view

1 Answers1