JavaScript 请教 AngularJS 和 jQuery 混用的问题

hanluner · 2015年02月03日 · 最后由 hanluner 回复于 2015年02月05日 · 19592 次阅读

因为想做一个根据选择人物不同(select),fullcalendar 展示不同人物的事件安排。绑定命令为 ng-change="showTeachers(subjectId)"

我在 angularjs 当中混用了 jquery 代码。但是选择之后并不能动态显示。 想请教各位造成这种情况的原因。项目需要,刚玩 angularjs,求教。

events: eventResults 这一步没有执行的感觉

  return $scope.showTeachers = function(subjectId) {
   var eventResults = new Array();
   this.course = new Course(subjectId);
   eventResults = this.course.all();
   $scope.courses = eventResults;
   $('#calendar').fullCalendar({
      events: eventResults
       //events: [{"title":"张三老师的托福课","start":"2015-02-15T10:30:00","end":"2015-02-15T12:30:00"},{"title":"张三老师的托福课2","start":"2015-02-16T10:30:00","end":"2015-02-16T12:30:00"}]
  });
};

第一行的 return 是什么意思? $scope.showTeachers 这个方法定义在某个 controller 里, 需要 return 吗? 这个方法是需要触发的. 按你的需要, 是点击 radio 选择人物后, 触发它. 也即是在 radio 上设置 ng-click = 'showTeachers(subjectId)' , 不知道你有没有这样做. 上下文不知. 无法给出确切的答复. 建议使用 chrome 自带的 debug, 或者 console.log 在代码中, 查看 showTeachers 方法是否被调用.

#1 楼 @suffering 已经被触发了,我在 select input 上面绑定了 ng-change="showTeachers(subjectId)",但是居然 eventResults 有值 (console.log 打印有值,页面打印也有。),但是下面的 events: eventResults 却没有赋值初始化成功。也就是说,最后页面上只有一个空白日历,但是没有 events 列表。所以 events: eventResults 这一步不知道为何不成功

#1 楼 @suffering 我重新更新了下问题。

初学者, 😄

  1. return 不知道 controller 中为什么会有
  2. this $($event.target)
  3. $('#calendar').fullCalendar({}) 这个应该交给 directive

#4 楼 @flowerwrong return 这个写法是支持的,要不要兑结果影响不大。第二点不是很明白,你想表达什么。第三点的话就要用到 angularui 的东西了。

#5 楼 @hanluner controller 中的 this 拿到的是 scope, 请使用$($event.target) 不一定用 angular-ui, 自己封装到 directive 也行. demo

看样子没必要混用,angularjs 无需 DOM 操作,全改用 ng 绑定。fullcalendar 部分的数据绑定改用 angular 的方式(ng-model 或者 {{}} ),这样如果没有附加插件用到 jquery 就可以把他去掉了

#7 楼 @dddd1919 问题就是在 fullcalendar 部分的数据绑定改用 angular 的方式。怎样的绑定才能使 fullcalendar 的 UI 随着选中动作而变化。

外部方法修改内部变量,要用 $apply 修改就能实时改变数据并展现到 view,详情查看文档。

像这样,不要乱用哦

$scope.$apply(function () {
  $scope.message = "Timeout called!";
});

#10 楼 @tuoxiaozhong 那我需要修改 fullcalendar 中的 events,该怎么修改呢?$apply 的方法只了解了一点。

$scope.$apply(function () {
  $scope.courses = eventResults;
});

下面用 $scope.courses 吧

events: $scope.courses

其实我不太理解。fullCalendar 方法需要的 events 数据你已给出来了,和 $scope 无关哒。如果 $apply 不行就可能还得研究一下那个填充课表的插件。

刚才查了下,fullCalendar 是个 jQuery 的插件,那直接用 jQuery 的方式来处理不用 angular?或者混用的话,给 div 绑定了事件,事件内部直接调用 jQuery 的代码也没问题

#13 楼 @dddd1919 #12 楼 @tuoxiaozhong #6 楼 @flowerwrong 我最终找出问题所在了。 fullcalendar 提供了重新刷新 events 的方法。但是在 angularjs 中应当用异步 callback 的形式赋值,否则这一步 events: eventResults 赋值为空。写后端的人太容易步入同步思维中。移动端倒是很会注意异步的事情。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册