Question

我有一个带动态对话框的页面，想从angularJS控制器中添加一些内容。

html代码是：

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

控制器看起来像：

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

但是jQuery并没有将内容添加到#datesController

中

有人会帮我解决这个问题吗？

Answer 1

请在操作他之后尝试更新每个范围的DOM。$ apply（）。

Answer 2

在AngularJs中使用jquery不是一个好习惯。如果你想附加任何Div

，它们会更好地使用自己的DOM实例。

var myEl = angular.element（document.querySelector（'#divID'））; myEl.prepend（'your html
'）;

否则写你的指令

Answer 3

我已经对我的代码做了一个快速的setTimeout技巧，它现在运行正常：

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

Answer 4

在jsfiddle中使用显示工作示例的this链接。以下是代码：

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

将jQuery追加方法调用到AngularJS控制器

4 个答案: