Modal içerisindeki bilgileri url'den nasıl görüntülerim?

Genelde js için çok yeni, lütfen benimle sabırlı olun.Modal içerisindeki bilgileri url'den nasıl görüntülerim?

Konuda belirtilen basit bir görev yapmam gerekiyor. Bazı araştırmalar yaptım ve ui.router kullanarak yapmaya çalıştım ama kodlamada çok iyi olmadığım için yanlış bir şey oldu.

ben url bu bilgiler http://prntscr.com/ashi5e

Yani burada kalıcı bir diyalog içinde görüntülenecek olacağını istediğiniz kodudur: Veriyi almak gerekir

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>

kaynak

2016-04-15 Frutis

(örn Bir hizmet ile) ve $ scope.items içine koydu. Modelinizde aynı şeyi yapın: öğeleri alın ve kapsamınıza bağlayın. Yani böyle hem denetleyici kaydetmeniz gerekir Başta modalDemoCtrl ve ModalInstanceCtrl kayıtlı gelmeyen tüm

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>

kaynak

2016-04-15 09:43:33 trollr

$ scope.items = [{id: 1, name: 'test'}, {id: 2, name: 'test2'}]; Bunu nasıl yapacağımı biliyorum ama bir URL'den bilgi almam gerekiyor. – Frutis

Belki de $ http.get gibi bir şey kullanabilir miyim? Bunu Jason'la denedim, ama yerel bir dosya. Bilgileri bir sunucudan almak istiyorum. – Frutis

Evet haklısınız. $ Http.get kullanın ve başarıda bu modal pencereyi açın. :-) –

var: var myApp = angular.module('plunker', ['ui.bootstrap']);: myApp gibi açısal modülü olan myApp.controller('modalDemoCtrl', ModalDemoCtrl);.Bir URL'yi $http kullanarak bu hizmetten almak ve modalInstance denetleyicinizde bu hizmet enjekte etmek için bir hizmet kullanabilirsiniz. örneğimde dataService'u ve getData adlı bir işlevi oluşturun ve bu işlevi modalInstance denetleyicisinden çağırın. gibi: dataService.getData().then(.. ve kullanımı yanıt almak için işlevini kullanın. ve yanıt verisini $scope.infos değişkenine kaydedin, böylece bu $scope.infos'u modalinizde kullanabilirsiniz.

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

kaynak

2016-04-15 10:13:00

Teşekkürler. Eve döndüğümde bunu deneyeceğim. Html bölümü ile bir şeyler yapmam gerekiyor mu? – Frutis

html bölümü olduğu gibi, html'nizde 'infos'u göstermek için güncellemeniz ve verdiğiniz url ile veri almak için erişiminizin olduğundan emin olmanız gerekir. –

Modal içerisindeki bilgileri url'den nasıl görüntülerim?

cevap

İlgili konular