urlからモーダル内部の情報を表示する方法は？

私はjs全体に非常に新しいですので、私と一緒に忍耐してください。urlからモーダル内部の情報を表示する方法は？

トピックに記載されている簡単な作業を行う必要があります。私はいくつかの研究を行い、ui.routerを使用しようとしましたが、何かコーディングがうまくいかないので、何かが間違っていました。

だからここにモーダルダイアログ内に表示されることを望んでコードです：あなたは、データを取得する必要があり

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>

出典

2016-04-15 Frutis

（例えば。サービスと一緒に）$ scope.itemsに入れてください。あなたのモーダルで同じことをする：アイテムを取得し、スコープにバインドする。 var myApp = angular.module('plunker', ['ui.bootstrap']);：myAppのような角度モジュールですmyApp.controller('modalDemoCtrl', ModalDemoCtrl);：それはあなたが好き両方のコントローラを登録する必要があります最初はmodalDemoCtrlとModalInstanceCtrlを登録しなかったすべての

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>

出典

2016-04-15 09:43:33 trollr

$ scope.items = [{id：1、name： 'test'}、{id：2、name： 'test2'}]; このようにする方法はわかっていますが、URLから情報を取得する必要があります。 – Frutis

たぶん$ http.getのようなものを使うことができますか？私はJasonと一緒に試しましたが、ローカルファイルです。どこからサーバーから情報を入手したいのですか？ – Frutis

はい、あなたは正しいです。 $ http.getを使用し、そのモーダルウィンドウを開いてください。 :-) –

です。

サービスを使用して、$httpを使用してURLからデータを取得し、そのサービスをmodalInstanceコントローラに挿入することができます。私の例ではdataServiceとgetDataという名前の関数を作成し、この関数をコントローラmodalInstanceから呼び出しました。 like：dataService.getData().then(..を使用して、関数を使用して応答を取得します。変数$scope.infosに応答データを格納してください。これにより、この$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);

出典

2016-04-15 10:13:00

ありがとうございます。私は家に帰るときにそれを試みます。 htmlの部分で何かする必要がありますか？ – Frutis

htmlの部分はそのままですが、あなたのhtmlに 'infos'を表示して、あなたが提供するURLでデータを取得するためのアクセス権があることを確認する必要があります –

urlからモーダル内部の情報を表示する方法は？

答えて

関連する問題