skip to Main Content

I am trying to display json values on my modal using angularjs. But I am failing to display on modal dialog, but I can see those values on my console or on alert message. Please help me where I am doing wrong. Thanks in advance.

Created 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"
}]

2

Answers


  1. Issue is your scope variable is not accessible in test.html.

    I just updated your variable to rootScope and its working fine not.

    Updated Plunker

    Note: This is a patch work and not a proper implementation. @Karim’s answer, looks more like a proper implementation and should be considered as answer if it works for you.

    Login or Signup to reply.
  2. it seems that you do not have visibility in your modal of that variable.

    try this, i’ve just fixed your 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;
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search