Javascript AngularJS嵌套视图中的控制器_Javascript_Angularjs_Angular Ui Router

Javascript AngularJS嵌套视图中的控制器

javascript angularjs

Javascript AngularJS嵌套视图中的控制器,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我是AngularJS的新手，一直坚持使用单控制器的角度嵌套视图的概念。我在这里看了一些例子，但对我没有帮助。下面是一个问题的代码，我需要两样东西。单击提交后： 1.所选日期必须指定为输入，url必须基于所选日期构建，并且该url的结果必须显示在模式中 2.同时，必须在另一个URL的“提交”按钮下方的页面（在tab.html中）中显示一个表（位于tab submit.html中）下面是我在app.js中的代码： wc.controller('MyController', function ($

我是AngularJS的新手，一直坚持使用单控制器的角度嵌套视图的概念。我在这里看了一些例子，但对我没有帮助。下面是一个问题的代码，我需要两样东西。单击提交后：

1.所选日期必须指定为输入，url必须基于所选日期构建，并且该url的结果必须显示在模式中

2.同时，必须在另一个URL的“提交”按钮下方的页面（在tab.html中）中显示一个表（位于tab submit.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

：。我的问题有可能得到解决吗？希望有人能帮助我理解这一点

提前谢谢

要求
1.有一个包含两个选项卡的页面
2.如果单击选项卡1，则应加载带有日期选择器和提交按钮的页面
3.选择日期选择器后，我将单击提交按钮
4.然后，我应该从url中获取我选择的特定日期的数据。
5.将有两个api调用，一个用于模态，一个用于表
6.然后，modal应显示数据

7.关闭模式后，应在submit按钮下方显示表格。

$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


//或者你可以把它放在任何你想要显示模态的元素上

正如我从你们的讨论中了解到的，我认为这就是你们想要做的

有一个包含两个选项卡的页面

如果单击选项卡1，则应加载带有日期选择器和提交按钮的页面

选择日期选择器后，我将单击提交按钮

然后从一个url我应该得到我所选择的特定日期的数据

将有两个api调用，一个用于模态，一个用于表

然后模态应该和数据一起显示

关闭模式后，表格应位于提交按钮下方

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

指令中的一些问题，您使用的方式

从api获取数据

如何打开和关闭模式

如何打印表中的数据

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

请查找以下代码更改。在代码中，您将获得模态的代码。但我不知道你将如何捆绑它。请随意更改

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>

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

Tab.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>

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


从下面选择：
提交
身份证件
身体
{{x.id}
{{x.body}}
信息


{x.id+'-'+x.title}


接近

在哪里可以使用httpget（）在此处调用url？您不需要这样做。只需将directive属性放在文档中，但确保它位于ng控制器名称空间中，然后它就可以访问该范围。在modal.html中，您可以使用来自该控制器的http数据。我试过你给我的那把枪。但我还是不明白你想做什么……需要再解释一下，对不起，伙计，没有太多时间阅读所有代码。@Nifal Nizar:我在这里使用了嵌套状态，当单击tab1时，必须显示带有日期选择器和提交的页面。选择日期并单击“提交”时，必须根据选择的日期调用url，并且该url中的数据必须以模式显示。接下来，当第一次单击submit时，必须调用另一个url，并且来自该url的数据必须显示在submit下面的表中。因此，当我们关闭模式时，来自第二个url的表格显示在提交按钮下方。在plunk中，我单击了选项卡1，但什么也没有发生……你能为我找到一个工作plunk吗……我将帮助你做其他事情。@Nifal Nizar:，在这个plunk中，你可以看到datepicker，submit，单击submit后，这将显示来自url的表格（不起作用，仅显示空表，即使与有效URL一起使用）你给的东西对我不起作用，我不知道为什么，无论如何，我会努力寻找！！你太棒了..太棒了。这正是我想要的..但是为什么模态中的数据没有显示出来呢？它显示了…但我认为你的背景是黑色的rytoops！！这是正确的..你真的太棒了..不用为你说句话了！！非常感谢你为我节省了周末朋友！！非常感谢..干杯！！