1

我使用 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()"
4

1 回答 1

7

Angularng-if不能是异步的，它希望以true/false同步的方式获得。

不要忘记每个angular 指令都会创建一个“watch”，它将作为 angular 脏检查机制的一部分被调用，如果您对其进行“繁重”操作，它将卡住浏览器。

基本上你的代码中有 2 个错误，第一个，你isShow根本没有返回布尔值，（它总是返回未定义的）。第二个，您可能正在方法内部进行 API 调用service.getKioskLogByKioskId。

为了解决这两个问题，您可以在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>
于 2018-07-17T05:23:17.737 回答