Controller in Nested views of AngularJS

Question

Iam new to AngularJS and was stuck at the concept of angular nested views with single controller. Gone through some examples here, which didn't help me. Below is the code from a question and I need 2 things here. After clicking on submit:

1.The date selected has to be assigned as input and url has to be constructed based on the date selected and the result from that url has to be displayed in Modal.

2.At the same time a table(present in tab-submit.html) has to displayed in the page(in tab.html) below the submit button from another URL.

Below is the code I have in 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');
};
};

Here is a plunker:http://plnkr.co/edit/xKbkFGoa3p5y5NAzueut?p=preview. Is it possible to get solution for my question??Hope anyone will help me to understand this.

Thanks in advance!!

Requirements
1. Have a page with two tabs
2. If click the tab1, should load the page with date picker and a submit button
3. After selecting a date picker I will click the submit button
4. Then from a url I should get the data for particular date which I have selected.
5. There will be two api calls, one for modal and one for table
6. Then modal should show up with the data
7. After closing the modal, table should below the submit button

I tried in the plunker which u gave. but still I didnt understand what you are trying to do...need little more explation, sorry dude don't have much time to read all the codes. — Nifal Nizar
– Nifal Nizar, Commented May 26, 2016 at 6:41
@Nifal Nizar: I have used nested states here, when tab1 is clicked a page with datepicker ans submit has to displayed. When date is selected and submit is clicked, based on selection of date the url has to be called and the data from that url has to be displayed in modal. Next at the same time,when submit was clicked first, another url has to called and the data from that url has to be displayed in a table below the submit. So that when we close the modal, the table from second url is displayed below the submit button. — Deborah
– Deborah, Commented May 26, 2016 at 7:06
in the plunker I clicked Tab 1, but nothing happen...can you get me a working plunker for that..ill help with other things.. — Nifal Nizar
– Nifal Nizar, Commented May 26, 2016 at 7:17
@Nifal Nizar: plnkr.co/edit/xKbkFGoa3p5y5NAzueut?p=preview , in this plunk you can see datepicker,submit and after clicking on submit this displays a table from URL(which is not working,showing up only empty table even used with valid URL ) — Deborah
– Deborah, Commented May 26, 2016 at 7:30
plunker you giving is not working for me,I dont know why, anyway Ill try and see — Nifal Nizar
– Nifal Nizar, Commented May 26, 2016 at 7:32

Nifal Nizar · Accepted Answer · 2016-05-27 09:47:24Z

As I understood from your discussion, I think this is what you wanted to do.

Have a page with two tabs
If click the tab1, should load the page with date picker and a submit button
After selecting a date picker I will click the submit button
Then from a url I should get the data for particular date which I have selected.
There will be two api calls, one for modal and one for table
Then modal should show up with the data
After closing the modal, table should below the submit button

I saw few issues in your codes.

Some issues in Directive, the way you use
Getting data from api
How you open and close the modal
How you print data in table

I have a updated, working Plunker here.

Please find the below code changes. In the codes you are getting the codes for Modal. but I dont know how you will bind it. Please change it as you want.

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>

Woww!! you are awesome.. thanx a lottt. This is exactly what I want.. But why is data in modal not being displayed??
oops!! that's correct.. you are really awesum.. no words for you!! Thnax a lot for saving my weekend friend!!thanx a lot.. Cheers!!

KpTheConstructor · Accepted Answer · 2016-05-20 17:46:16Z

0

$stateProvider is best used for navigating to an entirely different page in your app . For modals , dom animations ect .. This should be put in a directive .

Example

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

})

for instance ; in your modal.html would contain something like this

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

then in your main document

<div modal></div> 

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

answered May 20, 2016 at 17:46

KpTheConstructor

3,2991 gold badge16 silver badges24 bronze badges

2 Comments

Deborah Over a year ago

where can I use httpget() to call url here?

KpTheConstructor Over a year ago

you don't need to . just place the directive attribute in your document but make sure its within your ng-controller namespace then it will have access to that scope . In the modal.html you can use the http data from that controller . <div ng-controller="something"> <div modal></div> </div> <-- directive has access to parent controller

Collectives™ on Stack Overflow

Controller in Nested views of AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related