如何在视图中访问ngDialog数据属性

时间:2016-01-15 03:58:50

标签: angularjs ng-dialog

我正在使用user_signed_in?

我正在设置其ngDialog属性值。

  

问题:我不确定如何在视图中访问数据值。

这就是我设置ngDialog.openConfirm的方法。 data有价值。

myName

这就是我试图在视图中使用数据属性的方式。它不起作用。

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

请告知。

1 个答案:

答案 0 :(得分:1)

您可以与ngDialog分享范围,如下例所示:

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>