使用 AngularJS 整合腾讯云 SDK 遇到的问题, 在 Controller 里面调用 webim.login(loginInfo, listeners, options, function() {})方法并没有执行相应的监听事件

2016-08-23 00:14:15 +08:00
 97world

一个全局变量 listeners

function onConnNotify() {console.log('onConnNotify4ward');}

function jsonpCallback() {console.log('jsonpCallback4ward');}

function onMsgNotify() {console.log('onMsgNotify4ward');}

function onBigGroupMsgNotify() {console.log('onBigGroupMsgNotify4ward');}

function onGroupSystemNotifys() {console.log('onGroupSystemNotifys4ward');}

function onGroupInfoChangeNotify() {console.log('onGroupInfoChangeNotify4ward');}

function onFriendSystemNotifys() {console.log('onFriendSystemNotifys4ward');}

function onProfileSystemNotifys() {console.log('onProfileSystemNotifys4ward');}

var listeners = {
  "onConnNotify": onConnNotify,//监听连接状态回调变化事件,必填
  "jsonpCallback": jsonpCallback,//IE9(含)以下浏览器用到的 jsonp 回调函数,
  "onMsgNotify": onMsgNotify,//监听新消息(私聊,普通群(非直播聊天室)消息,全员推送消息)事件,必填
  "onBigGroupMsgNotify": onBigGroupMsgNotify,//监听新消息(直播聊天室)事件,直播场景下必填
  "onGroupSystemNotifys": onGroupSystemNotifys,//监听(多终端同步)群系统消息事件,如果不需要监听,可不填
  "onGroupInfoChangeNotify": onGroupInfoChangeNotify,//监听群资料变化事件,选填
  "onFriendSystemNotifys": onFriendSystemNotifys,//监听好友系统通知事件,选填
  "onProfileSystemNotifys": onProfileSystemNotifys//监听资料系统(自己或好友)通知事件,选填
};

在 Controller 里面调用 webim.login(), 但是监听事件没有执行.

angular.module('app')
  .controller('AppCtrl', ['$scope', '$translate', '$localStorage', '$window', 
    function(              $scope,   $translate,   $localStorage,   $window ) {
        
      function webimLogin() {
        console.log('webimLogin', loginInfo, listeners, options);
        webim.login(
          loginInfo, listeners, options,
          function (resp) {
            console.log('resp', resp);
            loginInfo.identifierNick = resp.identifierNick;//设置当前用户昵称
          },
          function (err) {
            alert(err.ErrorInfo);
          }
        );
      }
      webimLogin();

  }]);

但是使用 jQuery 为一个按钮绑定 click 事件, 再在这个 click 事件去调用 webim.login(), 则没有问题.

$('#btn-login').click(function (){ 
  function webimLogin() {
    console.log('webimLogin', loginInfo, listeners, options);
    webim.login(
      loginInfo, listeners, options,
      function (resp) {
        console.log('resp', resp);
        loginInfo.identifierNick = resp.identifierNick;//设置当前用户昵称
      },
      function (err) {
        alert(err.ErrorInfo);
      }
    );
  }
  webimLogin();
});

感觉像是作用域的问题, 不知道大家用 AngularJS 整合第三方 SDK 的时候, 是如何解决这类问题的?

3539 次点击
所在节点    程序员
4 条回复
Fleey
2016-08-23 07:31:59 +08:00
....我老感觉是你 angularJs 写的问题,我还是第一次看人这样写。你前端部分绑定 ng-click 了么
beginor
2016-08-23 10:35:37 +08:00
有些浏览器会奇葩的拦截自动加载数据的请求, 把 wenimLogin() 这句放到 $timeout 里面试试看。

此外, ng 整合第三方类库时, 如果需要更新 dom , 请使用 directive , 否则请使用 service 或者 provider 。
97world
2016-08-23 13:18:29 +08:00
@beginor 如你所说, 还真的是加一个$timeout 就可以了, 但是我不明白, 这真的是被浏览器拦截了?
beginor
2016-08-23 15:33:35 +08:00
只能说某些奇葩的浏览器会拦截,不是所有的浏览器都会。也可以用 ng 1.5 的 component ,这个 component 有生命周期的概念, 可以在 $onInit 方法中做任何事情, 想必已经考虑了这种情况。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/301074

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX