Question

我是AngularJS的新手，并且坚持单控制器的角度嵌套视图的概念。通过这里的一些例子，这对我没有帮助。以下是问题的代码，我需要两件事。点击提交后：

1.必须将所选日期指定为输入，并且必须根据所选日期构建网址，并且该网址的结果必须以模态显示。

2.同时，一个表（显示在tab-submit.html中）必须显示在另一个URL的提交按钮下面的页面（在tab.html中）。

以下是我在app.js中的代码：

wc.controller('MyController', function ($scope, $modal, $log, $http, $location, $filter) {
var that = this;

var in10Days = new Date();
in10Days.setDate(in10Days.getDate() + 10);
$scope.dates = {
    date3: " "
};
this.dates = {
    date3: new Date()
};
this.open = {
    date3: false
};
// Disable weekend selection
this.disabled = function (date, mode) {
    return (mode === 'day' && (new Date().toDateString() == date.toDateString()));
};
this.dateOptions = {
    showWeeks: false,
    startingDay: 1
};
this.timeOptions = {
    readonlyInput: false,
    showMeridian: false
};
this.dateModeOptions = {
    minMode: 'year',
    maxMode: 'year'
};
this.openCalendar = function (e, date) {
    that.open[date] = true;
};

$scope.format = 'yyyy-MM-dd%20HH:mm';
debugger;
$scope.open = function () {
var date = $filter("date")($scope.dates.date3, $scope.format);
    $http.get(http://myurlPartA+date+"myurlPartB")
      .success(function (response) {
          var modalInstance = $modal.open({
              templateUrl: 'myModalContent.html',
              controller: 'ModalInstanceCtrl',
              resolve: {
                  items: function () {

                      return response;
                  }
              }

          });
      });


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

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
};

以下是plunker：http://plnkr.co/edit/xKbkFGoa3p5y5NAzueut?p=preview。是否有可能为我的问题找到解决方案？希望有人能帮助我理解这一点。

提前致谢!!

要求
1.有一个带有两个标签的页面
2.如果单击tab1，则应加载带有日期选择器和提交按钮的页面 3.选择日期选择器后，我将单击提交按钮
4.然后从网址我得到我选择的特定日期的数据 5.将有两个api调用，一个用于模态，一个用于表
6.然后模态应该显示数据
7.关闭模态后，表格应位于提交按钮

下方

Answer 1

正如我从你的讨论中所理解的那样，我认为这就是你想要做的。

有一个包含两个标签的页面
如果单击tab1，则应加载包含日期选择器和提交按钮的页面
选择日期选择器后，我将点击提交按钮
然后从网址我应该得到我选择的特定日期的数据。
将有两个api调用，一个用于模态，一个用于表
然后模态应显示数据
关闭模态后，表格应位于提交按钮

我在您的代码中看到了一些问题。

指令中的一些问题，使用方式
从api获取数据
如何打开和关闭模态
如何在表中打印数据

我在这里有一个更新的工作Plunker。

请查看以下代码更改。在代码中，您将获得Modal的代码。但我不知道你将如何绑定它。请根据需要更改。

<强>的index.html

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: darkgrey;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.datetimepicker.full.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="ui-bootstrap-tpls.js"></script>
    <script src="datetime-picker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="application.js"></script>

</head>
<body ng-app="wc">
    <ul>
        <li><a ui-sref="tab">Tab1</a></li>
        <li><a ui-sref="tabs">Tab2</a></li>
    </ul>
    <div class="container">
        <div ui-view></div>
    </div>
</body>
</html>

<强>的application.js

var wc = angular.module('wc', ['ui.router','ui.bootstrap', 'ui.bootstrap.datetimepicker']);

wc.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/posts');
    $stateProvider
    .state('tab', {            
        url: '/tab1',
        templateUrl: 'tab.html'
    })        
    .state('tabs', {
        url: '/tabs',
        templateUrl: 'tabs.html',         
    });
});

wc.controller('SampleController', function ($scope, $http, $modal) {

    $scope.subt_click = function () {

        //Selected Date is here use as you want
        //$scope.mydate
        alert($scope.mydate);

        //Modal Data
        $http.get("http://jsonplaceholder.typicode.com/posts")
        .success( function(response) {
            var modalInstance = $modal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalController',
                resolve: {
                    items: function () {
                        return response;
                    }
                }
            });
        });

        //Table Data
        $http.get("http://jsonplaceholder.typicode.com/posts")
        .success( function(response) {
            $scope.tableData = response;
        });
    };

});

wc.controller('ModalController', function ($scope, $modalInstance, items) {

    $scope.modalData = items;

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

});

wc.directive('datetimepicker', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datetimepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

<强> Tab.html

<div class="jumbotron text-top" ng-controller="SampleController">   
<h4>Select from below:</h4> 
<form class="form-horizontal">
    <input datetimepicker="" ng-model="mydate" type="text" readonly-input="true" />
    <a class="btn btn-info" ng-click="subt_click()">Submit</a>
</form>

<div class="table-responsive" ng-show="tableData.length > 0"> 
    <table class="table table-striped table-bordered table-hover dataTables-example"> 
        <thead> 
            <tr> 
                <th>ID</th> 
                <th>Body</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr ng-repeat="x in tableData"> 
                <td>{{x.id}}</td> 
                <td>{{x.body}}</td> 
            </tr> 
        </tbody> 
    </table> 
</div> 

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3>Info</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="x in modalData">
                {{ x.id + '-' + x.title}}
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">Close</button>
    </div>
</script>

Answer 2

$ stateProvider 最适合用于导航到应用中完全不同的页面。对于模态，dom动画等。这应该放在一个指令中。

示例

wc.directive('modal', function(){ return { restrict: "A", template: 'modal.html' // FYI the html for the actual modal popup link: function(scope,elem,attrs){ $(".modal").show(); } } })
例如
;在你的modal.html中将包含类似这样的内容

<div class="modal" style="display:none;"> </div>

然后在你的主要文件中

<div modal></div> //Or you can place this on whatever element you desire to show the modal

AngularJS的嵌套视图中的控制器

2 个答案: