如何将 json 数据放入 AngularJS 模态对话框？

Question

我正在尝试使用 angularjs 在我的模式上显示 json 值。但是我无法在模式对话框中显示，但我可以在我的控制台或警告消息中看到这些值。请帮助我哪里做错了。提前致谢。

已创建 Plnkr。

html:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
<div ng-controller="TestCtrl">
    <button ng-click="test()">Test</button>
</div>
  </body>
</html>

script.js:

angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
  $scope.test = function(){
     $http.get('test.json')
        .success(function(data) {
           $dialog.dialog({}).open('test.html');
            $scope.items=data;
            console.log(data);
            alert(JSON.stringify(data));
        });
 }
 }

test.html:

<div class="modal-header">
  <h1>Test Modal</h1>
</div>'
<div class="modal-body">
  Test Data:
    <ul ng-repeat="item in items">
    <li>
      {{item.test1}}
      {{item.test2}}
      {{item.test3}}
    </li>
  </ul>
</div>

test.json:

[{
    "test1": "test1value",
    "test2": "10",
    "test3": "100"
}]

Answer 1

问题是您的作用域变量在 test.html 中不可访问。

我刚刚将您的变量更新为 rootScope，但它工作正常。

Updated Plunker

注意：这是一个补丁工作，而不是一个正确的实现。 @Karim 的回答，看起来更像是一个正确的实现，如果它对你有用，应该被视为答案。

Answer 2

您似乎在模态中看不到该变量。

试试这个，我刚刚修复了你的 plunker:

// Code goes here

var app = angular.module('myApp', ['ui.bootstrap']);

function TestCtrl($scope, $dialog, $http){
  $scope.test = function(){
   // $dialog.dialog({}).open('modalContent.html');

    $http.get('test.json')
        .success(function(data) {
           $scope.items=data;
           console.log(data);
           alert(JSON.stringify(data));
           $dialog.dialog({
             templateUrl:  'test.html',
              controller: 'dialogCtrl',
              resolve: { items: function () { return $scope.items; } }
           }).open('test.html');

        });

  }

}

app.controller('dialogCtrl', function ($scope, items) {
  $scope.items= items;
});

如何将 json 数据放入 AngularJS 模态对话框？

How to get json data into AngularJS modal dialog?

javascript

angularjs

json

modal-dialog

ng-dialog