Question

我遇到一个非常麻烦的问题，即ng-click更新预期的范围变量，范围变量似乎在DOM上更改（当通过chrome调试器查看时），但是已更改的dom元素未在浏览器中重绘。我已经注意到多个浏览器和设备，但仅在屏幕宽度低于768时。我使用角度版本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]);
}());

通过.config调用控制器：（function（）{ golfWire.gwWebApp = angular.module（'gwWebApp'，[ 'ngRoute'， 'ngAnimate'， 'ngResource'， 'ui.bootstrap'， “火力”， '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

Eliel在AngularJS - bind to directive resize的回答略有不同，对我有用。在directive.js中：

      $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图表现在调整大小以填充容器。

Angularjs DOM已刷新但屏幕未重绘。不知道从哪里开始

2 个答案: