Angularjs dom是刷新的，但屏幕没有重新绘制.不确定从这里去哪里

Question

我有一个非常令人不安的问题，其中ng click更新了预期的范围变量，范围变量似乎在DOM上发生了变化（当通过Chrome调试器查看时），但是DOM元素是DOM元素在浏览器中没有重新绘制更改。我已经在多个浏览器和设备上注意到，但仅当屏幕宽度低于768时。我使用的是Angular版本1.2.6。有人遇到过这种类型的问题吗？

我简化了代码，以尝试隔离并确认正在发生的事情。这是其简化版本中的代码：

首先视图：

<section class="stream-area">
<div class="group">        
    <div class="gw-fixed-top-panel">
        <div  class="group-heading ">
            <div class="panel-title">
                <span class="fleft name" ng-click="usergroup.collapsed=!usergroup.collapsed"> CLICK HERE </span>
                    <a ng-show="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-cog"></i></a>
                    <a ng-hide="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-chevron-up"></i></a>
                <div> {{usergroup.collapsed}}</div>                           
            </div>
        </div>
    </div>
</div>
</section>

此时控制器什么都没做...

'use strict';
(function () {
var groupController = function($scope) {
    $scope.usergroup={};
    $scope.usergroup.collapsed=true;
};
myOverall.myApp.controller('GroupController',['$scope', groupController]);
}());

控制器由Via .Config调用：（功能 （） { golfwire.gwwebapp = angular.module（'gwwebapp'，[ 'ngroute'， 'nagimate'， " ngresource"， 'ui.bootstrap'， " firebase"， " localstorageModule"， 'nggrid' ]）;

myOverall.myApp
    .config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
        .when('/group/view', {
            controller: 'GroupController',
            templateUrl: '/app/views/group.html'
          })
          .otherwise({
            redirectTo: '/main'
          });
    /* $locationProvider.html5Mode(true); */
}]);

Answer 1

在您的控制器中添加此功能

$scope.toggleUserGroup = function(){
       $scope.usergroup.collapsed = ! $scope.usergroup.collapsed;
       $scope.$apply();
}

在ng-click上调用此功能。这应该使DOM更新和刷新。

推理：通过调用$ apply（），您触发一个digest（）循环，该循环检查更改的表达式并在需要时重新粉刷DOM。

不解决问题，请提供一个plunkr/小提琴。很乐意获得一些工作代码。

谢谢，

Answer 2

在gangularjs中，Eliel答案的略有变化 - 与指令调整大小相结合。在指令中：

      $scope.onResizeFunction = function() {
      };
      // Call to the function when the page is first loaded
      $scope.onResizeFunction();
      angular.element($(window)).bind('resize', function() {
        $scope.onResizeFunction();
        $scope.$apply();
      });

我致电

    $(window).resize();

从我的app.js中目前，指令的D3图表大小以填充容器。