如何在使用 angularjs 调整大小时在 div 中显示 window.width

Question

更新：我真的很感激更多 angular-ish 解决方案......虽然我已经找到了解决我的问题的方法，但我认为这是一个糟糕的解决方案，因为我基本上只是设置了一个 window.resize 监听器，然后更新我的 div 的 innerhtml ....但我可以用普通的 js

我想要 div 在调整大小时持续显示 innerWidth。

我认为我不需要 div 上的指令来执行此操作。所以目前我只是在 div 中放置一个表达式，我认为它会在同名的 $scope 属性更新时更新：

  <body  ng-app        = "my_app"
         ng-controller = "my_controller">
    <div>{{the_width}}</div>
  </body>

  <script>
    var gvo_app  = angular.module( "my_app" , [] ) ;
    gvo_app
      .controller( "my_controller" ,
                   function( $window , $scope ) 
                      { angular
                          .element($window)
                            .on( 'resize' ,
                                  function( ) 
                                    { console.log('resize : ' + $window.innerWidth);
                                      $scope.the_width = $window.innerWidth ;
                                    }
                                )
                      }
                  )
  </script>

我的plunker

Answer 1

我需要：$scope.$digest();

<script>
    var gvo_app  = angular.module( "my_app" , [] ) ;
    gvo_app
      .controller( "my_controller" ,
                   function( $window , $scope ) 
                      { angular
                          .element($window)
                            .on( 'resize' ,
                                  function( ) 
                                    { console.log('resize : ' + $window.innerWidth);
                                      $scope.the_width = $window.innerWidth ;
                                      $scope.$digest() ; // <<<<------
                                    }
                                )
                      }
                  )
  </script>

我是怎么犯这个错误的？

我过去几天一直在研究的所有介绍性 angularjs 示例都显示了 <input> 元素中的大部分数据绑定。事实证明，<input> 元素是 angular 中的一个特例，因此 angular 会自动创建一个侦听器并在状态更改时调用它。我原以为只要在任何元素（例如 <div> 上使用绑定表达式 {{my_variable}} 就可以完成此操作……但不是。

我需要强制 angular 调用侦听器，这是使用 angular 'service'、.$digest()（实际上强制angular 查看每个听众，并调用自上次 .digest()) 以来发生变化的所有内容。

这 article 解释了 $watch 和 $digest ... (angular 似乎没有使用术语 'listener'，而是 'watch'，而 'digest' 只是刷新了所有 'watches' 以查看如果它们已更改）

如何在使用 angularjs 调整大小时在 div 中显示 window.width

How to display window.width in div on resize using angularjs

expression

controller

angularjs