Question

我对js总体上很新，所以请耐心等待我。

我需要做一个在主题中说明的简单任务。我已经做了一些研究，并试图使用ui.router，但因为我不是很好编码出错了。

我希望来自网址的这些信息会显示在模态对话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>

Answer 1

您需要获取数据（例如，使用服务）并将其放入$ scope.items。在您的模态中执行相同的操作：获取项目并将其绑定到您的范围。这就是全部

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>

Answer 2

您最初没有注册modalDemoCtrl和ModalInstanceCtrl您需要注册两个控制器：myApp.controller('modalDemoCtrl', ModalDemoCtrl);其中myApp是角度模块，如：{{1 }}

您可以使用var myApp = angular.module('plunker', ['ui.bootstrap']);使用服务从网址获取数据，并在$http控制器中注入该服务。在我的示例中创建modalInstance和名为dataService的函数，并从getData控制器调用此函数。比如：modalInstance并使用then函数来获得响应。并将响应数据存储到dataService.getData().then(..变量中，以便您可以在模式中使用此$scope.infos。

$scope.infos

如何在url中显示模态内的信息？

2 个答案: