2016-11-02 7 views
0

私はngDialogを初めて使用しています。サービスから受け取った応答データをngDialogに表示しようとしています。ポップアップが表示され、静的なデータを表示できますが、 :$ scope.myData、動的な値が入力されません、どこに間違っているのかを教えてください... 以下はコードです。応答データをngDialogに表示できません

popup.html:

<div>hi how r u</div> 
<div>I am fine thank u</div> 

コントローラーコード:

paymentSearchApp.controller('paymentSearchCtrl', function (getXmlService,paymentSearchService,paymentSearchResponse,paymentDetailService,auditHistoryService,errorLogService,accountingEntryService, notesService,$scope, $q, ngDialog) { 
getXmlService.getXmlDatafunction().then(
    function(response){ 
    $scope.xmldata = response; 
    console.log($scope.xmldata); 
    ngDialog.open({ 
     template: 'showXml.html', 
     className: 'ngdialog-theme-default', 
     data: $scope.xmldata 
     }); 
    }, function(error){} 
) 
}); 

答えて

0

あなたはかなり近いです!

ngDialog.openに渡されるオブジェクトには、実際にはdataキーを使用して、ダイアログのスコープにデータを注入できます。
しかし、データオブジェクトはスコープの潜在的に既に存在するプロパティを直接オーバーライドしていません。$scope.ngDialogDataで利用できます。

たとえば、次のコードを考慮:{{ngDialogData.ip}}:あなたはを参照して、あなたのダイアログテンプレート内、ip情報を見つけることができます

ngDialog.open({ 
    template: 'dialogTemplate', 
    data: { 
    ip: res.data.origin 
    } 
}); 

は説明のため、以下のスニペットを確認してください。

私は質問に私のコントローラスニペットを更新した

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

 
myApp.factory('PaymentSearchSvc', ['$http', function($http) { 
 
    return { 
 
    getXmlDataFunction: $http.get.bind($http, 'https://httpbin.org/ip') 
 
    }; 
 
}]); 
 

 
myApp.controller('PaymentSearchCtrl', ['$scope', 'ngDialog', 'PaymentSearchSvc', function($scope, ngDialog, paymentSearchSvc) { 
 
    $scope.process = function() { 
 
    paymentSearchSvc.getXmlDataFunction().then(function(response) { 
 
     ngDialog.open({ 
 
     template: 'dialogTemplate', 
 
     data: { 
 
      ip: response.data.origin 
 
     } 
 
     }); 
 
    }); 
 
    }; 
 
}]);
.text-primary { 
 
    color: steelblue; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/js/ngDialog.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog-theme-default.min.css"> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="PaymentSearchCtrl"> 
 
    <button ng-click="process()">What's my IP?</button> 
 
    </div> 
 

 
    <script type="text/ng-template" id="dialogTemplate"> 
 
    <h1>Dialog content</h1> 
 
    <p> 
 
     Your IP address is: <span class="text-primary">{{::ngDialogData.ip}}</span> 
 
    </p> 
 
    </script> 
 
</div>

+0

私はあなたの答え、その作業に本当に感謝しています!!! –

0

私はあなたのように、コントローラを使用していないことをここに気付いていてあなたは、表示するデータを渡すために、コントローラを使用する必要がありますよく、私にあなたを見せてあげよう。

getXmlService.getXmlDatafunction().then(
    function(response){ 
    $scope.xmldata = response; 
    console.log($scope.xmldata); 
    ngDialog.open({ 
     template: 'showXml.html', 
     className: 'ngdialog-theme-default', 
     controller: ['$scope', function($scope) { 
       $scope.data = $scope.xmldata 
       // Controller logic here 
     }] 
     }); 
    }, function(error){} 
) 

これ以外のもう一つのデモは以下の通りです:stackoverflow:Demo

私に知らせてください。

+0

、私は本当に、内部コントローラを作成する必要がありますか?私はすでにpaymentSearchCtrlコントローラ内でngDialog.openを呼び出しています。アドバイスをお願いします... –

+0

実際にはこれはちょうど方法の1つで、コントローラからのデータを渡すことができます。正確にどのように渡したり、ngDialogを使っていますか?あなたのアプリ。詳細については、ngDialogドキュメントを参照してください。 – Jigar7521

+0

@pranayanand Nah、実際には内部コントローラを作成する必要はありません。どんな面倒なことでしょう!詳細は私の答えを見てください。 – ccjmne

関連する問題