javascript - यूआरएल से मॉडल के अंदर की जानकारी कैसे प्रदर्शित करें?




angularjs modal-dialog (2)

मैं जेएस कुल मिलाकर बहुत नया हूँ, कृपया मेरे साथ धैर्य रखें।

मुझे इस विषय में कहा गया एक साधारण कार्य करने की आवश्यकता है। मैंने कुछ शोध किया है और IU.router का उपयोग करने की कोशिश की है, लेकिन जब से मैं कुछ कोडिंग के साथ बहुत अच्छा नहीं हूँ गलत हो गया

मैं चाहता हूं कि url से यह जानकारी मॉडेल संवाद http://prntscr.com/ashi5e के अंदर प्रदर्शित की जाएगी

तो यहां कोड है:

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>


आपको डेटा प्राप्त करने की आवश्यकता है (जैसे सेवा के साथ) और उसे $ स्कोप में डालें। अपने मॉडल में ऐसा ही करें: आइटम प्राप्त करें और इसे अपने दायरे में बाँध लें बस इतना ही

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>


आपने modalDemoCtrl और ModalInstanceCtrl पंजीकृत नहीं किया है पहले आपको दोनों नियंत्रक की तरह रजिस्टर करना है: myApp.controller('modalDemoCtrl', ModalDemoCtrl); जहां myApp कोणीय मॉड्यूल की तरह है: var myApp = angular.module('plunker', ['ui.bootstrap']);

आप $http का उपयोग करके एक यूआरएल से डेटा प्राप्त करने के लिए एक सेवा का उपयोग कर सकते हैं और यह सेवा आपके modalInstance नियंत्रक में इंजेक्ट कर modalInstance है। मेरे उदाहरण में dataService और dataService नामक फ़ंक्शन को getData और इस फ़ंक्शन को modalInstance नियंत्रक से modalInstance । जैसे: dataService.getData().then(.. प्रतिक्रिया प्राप्त करने के लिए फ़ंक्शन का उपयोग करें। और $scope.infos चर में प्रतिक्रिया डेटा स्टोर करें ताकि आप अपने modal में $scope.infos उपयोग कर सकते हैं।

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




modal-dialog