当在ng-if AngularJS中使用函数api时,浏览器会冻结

Question

我使用angularjs,我有一个问题,ng-if当我使用返回的函数true或false在两个API,浏览器冻结

self.isShow= function() {
    service.getKioskLogByKioskId([stateParams.kioskId], function (data) {
        self.kioskLog = data;
        service.getKiosk([stateParams.kioskId], function (kiosk) {
            self.kiosk = kiosk;
            debugger 
            if (self.kioskLog.isConnected && self.kiosk.isActive)

                return true;
            else
                return false;

        });
    });
}

并在HTML中

ng-if="self.isShow()"

Answer 1

Angular ng-if不能是异步的,它希望以true/false同步的方式进行.

不要忘记,每个 angular指令都会创建一个"watch",它将作为angular的脏检查机制的一部分进行调用.如果你对它进行"重"操作,它将卡在浏览器上.

基本上你的代码中有两个错误的东西,第一个,你isShow根本没有返回布尔值(它总是返回undefined).第二个,您可能在service.getKioskLogByKioskId方法内部进行API调用.

为了解决这两个问题,你可以在service.getKioskLogByKioskId你的控制器的构造函数内进行调用(如果它是一个组件,那里有$onInit生命周期钩子),然后将异步结果保存在控制器上,并使用它来查看.

看起来应该是这样的:

class MyController {
  constructor(stateParams) {
    this.stateParams = stateParams;
    this.isShow = false; // initial value
  }

  $onInit() {
     const self =this;
     service.getKiosk([stateParams.kioskId], function (kiosk) {
          self.kiosk = kiosk;
          debugger 
          if (self.kioskLog.isConnected && self.kiosk.isActive)
              self.isShow = true;
          else
              self.isShow = false;

     });
  }
}


// view.html
<div ng-if="$ctrl.isShow"></div>