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

您的模态中似乎没有可见性。

试试这个，我刚修好你的傻瓜：

// 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;
});

Answer 2

问题是test.html无法访问您的范围变量。

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

Updated Plunker

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

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

2 个答案: