2016-01-15 57 views
0

我正在使用ngDialog如何訪問視圖中的ngDialog數據屬性

我正在設置其data屬性值。

問題:我不知道如何在我的視圖中訪問數據值。

這就是我如何設置ngDialog.openConfirm。 myName有價值。

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

這是我如何試圖在視圖中使用數據屬性。這是行不通的。

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

請指教。

回答

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="[email protected]" 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>

+0

我使用app.factory(角服務),而不是控制器。所以我認爲不能使用$ scope。糾正我,如果我錯了請。 – immirza

+0

對不起,但我不明白:您是否在服務中使用ngDialog? – beaver

+0

是的,我使用ngDialog裏面的服務(infact在工廠內)。那麼,我能做到嗎?請任何想法。 – immirza