CODEWITHSUNDEEP
javascriptangularjsmodal-dialog
Frutis
Frutis

Reputation: 489

How to display information inside modal from url?

I am very new to js overall so please be patient with me.

I need to make a simple task which is stated in the topic. I have done some research and tried to make using ui.router but since I am not very good with coding something went wrong.

I want that this information from url would be displayed inside the modal dialogue http://prntscr.com/ashi5e

So here is the code:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });


    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};
<!doctype html>
<html ng-app="plunker">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
 <script src="js/example.js"></script>
 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
 <script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
   <h3>Log</h3>
  </div>
  <div class="modal-body">

   Content
  </div>
  <div class="modal-footer">
   <button class="btn btn-warning" ng-click="cancel()">Close</button>
  </div>
 </script>

 <button class="btn" ng-click="open()">Log</button>

</div>
</body>
</html>

Upvotes: 5

Views: 2100

Answers (2)

trollr
trollr

Reputation: 1115

You need to get the data (eg. with a service) and put it into $scope.items. In your modal do the same: get items and bind it to your scope. That's all

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {

    /* Get data here with a service or smth */
    $scope.items = '';

    $scope.open = function () {
       $http.get("YOUR_URL")
         .then(function(response) {
            $scope.items = response.data
            var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                     items: function () {
                        return $scope.items;
                  }
                }
             });
         });
    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items; 

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};
<!doctype html>
<html ng-app="plunker">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
 <script src="js/example.js"></script>
 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
 <script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
   <h3>Log</h3>
  </div>
  <div class="modal-body">
    {{items}}
  </div>
  <div class="modal-footer">
   <button class="btn btn-warning" ng-click="cancel()">Close</button>
  </div>
 </script>

 <button class="btn" ng-click="open()">Log</button>

</div>
</body>
</html>

Upvotes: 2

Shaishab Roy
Shaishab Roy

Reputation: 16805

You didn't registered modalDemoCtrl and ModalInstanceCtrl at first you need to register both controller like: myApp.controller('modalDemoCtrl', ModalDemoCtrl); where myApp is angular module like: var myApp = angular.module('plunker', ['ui.bootstrap']);.

you can use a service to get data from an url by using$http and that service inject in your modalInstance controller. in my example create dataService and a function named getData and called this function from modalInstance controller. like: dataService.getData().then(.. and use then function to get response. and store response data in to $scope.infos variable so you can use this $scope.infos in your modal.

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


var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });


    };
};
myApp.controller('modalDemoCtrl', ModalDemoCtrl);


myApp.factory('dataService', function($http) {
  return {
    getData: function() {
      return $http.get('http://prnt.sc/ashi5e');
    }
  };
});


var ModalInstanceCtrl = function ($scope, $modalInstance, items, dataService) {
    dataService.getData().then(function(response) {
      $scope.infos = response.data;
    });
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

myApp.controller('ModalInstanceCtrl', ModalInstanceCtrl);

Upvotes: 0

Related Questions