Call jQuery append method to content within AngularJS controller

Question

I have got a page with with dynamic dialog and would like to add some content into it from angularJS controller.

The html code is:

 <ons-template id="calendar.html">
  <ons-dialog style="height: 250px;" var="naviDialog" cancelable  ng-controller="datesController">
    <ons-navigator var="myNav">
      <div id="sevenDays" style="text-align: center"></div>
    </ons-navigator>
  </ons-dialog>
</ons-template>

And controller looks like:

module.controller('datesController', function($scope) {
      $scope.addDates = function () {
         for (var i = 0; i <= 8; i++) {
          var date = new Date();
          date.setDate(date.getDate() + i);
          $("#sevenDays").append("<div id='day" + i + "'>" + ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear() + "</div>");
        }
        $("#day0").replaceWith("<div id='day0' class='current'>today</div>");
        $("#day1").replaceWith("<div id='day1'>tomorrow</div>");
      };
      $scope.addDates();
    });

But jQuery doesn't append content into #datesController

Would anybody help me with this issue?

Instead of doing it via jQuery, why don't you include the HTML in the <div id="sevenDays" style="text-align: center"></div>, run a ng-repeat in it, and update the model in the controller. — Shashank
– Shashank, Commented Feb 2, 2016 at 10:22
Hi @Shashank can you show me an example? many thanks in advance — qqruza
– qqruza, Commented Feb 2, 2016 at 10:38

bgeissler · Accepted Answer · 2016-02-02 10:19:30Z

1

Please try to update the DOM per $scope.$apply() after you manipulate him.

answered Feb 2, 2016 at 10:19

bgeissler

881 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

qqruza Over a year ago

Thank you @bgeissler can you show me an example how to do it?

Amit Jambotkar · Accepted Answer · 2016-02-02 10:21:17Z

1

Using jquery with AngularJs is not an good practice.Both will use own DOM instance better try like this if you want append any Div

var myEl = angular.element( document.querySelector( '#divID' ) ); myEl.prepend('your html
');

else write your directives

answered Feb 2, 2016 at 10:21

Amit Jambotkar

925 bronze badges

Comments

qqruza · Accepted Answer · 2016-02-02 11:26:57Z

I have done a quick setTimeout trick to my code and it works fine now:

 module.controller('datesController', function($scope) {
      $(function() {
        setTimeout(function() {
         for (var i = 0; i <= 6; i++) {
          var date = new Date();
          date.setDate(date.getDate() + i);
          $("#sevenDays .list").append("<ons-list-item modifier='tappable' id='day" + i + "'>" + ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear() + "</ons-list-item>");
        }
        $("#day0").replaceWith("<ons-list-item modifier='tappable' id='day0' class='current'>today</ons-list-item>");
        $("#day1").replaceWith("<ons-list-item modifier='tappable' id='day1'>tomorrow</ons-list-item>");
      }, 100);
    });
    });

Shashank · Accepted Answer · 2016-02-02 12:14:09Z

Use this link in jsfiddle that shows the working example. Below is the code:

HTML

<div ng-app="app">
  <div id="sevenDays" ng-controller="datesController">
    <div id="day{{$index + 1}}" ng-repeat="item in dateList">
        {{$index + 1}}) 
        <span ng-if="$index == 0">today</span>
        <span ng-if="$index == 1">tomorrow</span>
        <span ng-if="(($index != 0) && ($index != 1))">{{item.date}}</span>
    </div>
  </div>
</div>

JS

var app = angular.module('app', []);

app.controller('datesController', function ($scope) {

    $scope.dateList = [];
    $scope.addDates = function () {
        for (var i = 0; i <= 8; i++) {
            var date = new Date();
            date.setDate(date.getDate() + i);
            $scope.dateList.push({ 'date': ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + date.getFullYear() });
        }
    };
    $scope.addDates();
});

Collectives™ on Stack Overflow

Call jQuery append method to content within AngularJS controller

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related