Question

我有一个AngularJS应用程序，该应用程序使用Bootstrap的响应实用程序隐藏/显示内容。

<div class="d-none d-xl-block">
    //content   
</div>

在视图更改内容中，我有多个Angular指令，具体取决于从控制器返回的值，并且由于必须容纳多个设备，因此最多可以有三个相同的指令。这显然会对性能产生影响。

<div class="d-xl-none"> <!--all devices minus xl-->
    <div data-ng-if="$ctrl.patentFx.getSelectedPatent()">
    </div>
</div>

<div class="d-none d-xl-block"> <!--xl device only-->
    <div data-ng-if="$ctrl.patentFx.getSelectedPatent()">
    </div>
</div>

由于需要响应，功能$ctrl.patentFx.getSelectedPatent()出现了两次。

ngIf从DOM中删除元素，因此，如果我将一个值返回到ngIf，则根据屏幕的大小，我可以删除未使用的内容，从而防止函数被触发多达三个时间。

问题是我有数十个页面需要此逻辑。我曾考虑过将功能添加到服务中，但是每当窗口调整大小时（如果用户拖动窗口，它可能发出数百次请求）就向每个控制器发出请求，这似乎并不是服务中最重要的一项。有效的方法。

问题

如何在不向每个单独的控制器添加功能的情况下向数十个控制器发出信号，通知窗口已调整大小？

//Logic to be used for detecting window size

$window.on('resize', checkTemplateVisible);

function checkTemplateVisible(event){

     $timeout(function(){

          if($window.pageXOffset >= 769 && $window.pageXOffset < 993) {
            console.log('md')
          }

          if($window.pageXOffset >= 993 && $window.pageXOffset < 1201) {
            console.log('lg')
          }

          if($window.pageXOffset >= 1201) {
            console.log('xl')
          }


     })

}

广播窗口调整为多个控制器的大小

0 个答案: