AngularJS实现div高度与宽度相等（已有原生JS实现）

刚好我之前处理过类似的需求，既然你已经用原生JS实现了等宽高div，那咱们把它转换成AngularJS的最佳实践写法——自定义指令，毕竟AngularJS里不推荐直接在控制器里操作DOM，指令才是处理DOM交互的正确姿势～

首先，把你原生JS的逻辑封装成AngularJS自定义指令，这样不仅能实现需求，还能复用，完全贴合Angular的设计理念：

angular.module('yourAppName', [])
.directive('squareDiv', function($window) {
  return {
    link: function(scope, element) {
      // 定义设置高度匹配宽度的核心函数
      function syncHeightToWidth() {
        var currentWidth = element[0].offsetWidth;
        element[0].style.height = `${currentWidth}px`;
      }

      // 页面初始化时先执行一次，确保初始高度正确
      syncHeightToWidth();

      // 监听窗口 resize 事件，窗口大小变化时实时更新高度
      angular.element($window).on('resize', function() {
        scope.$apply(syncHeightToWidth);
      });

      // 指令销毁时移除监听事件，避免内存泄漏
      scope.$on('$destroy', function() {
        angular.element($window).off('resize');
      });
    }
  };
});

接下来在HTML里使用这个指令非常简单，不用硬编码元素ID，直接给目标div加上指令属性即可：

<div square-div style="width: 50%; background: #eee;"></div>

为什么推荐用指令而不是控制器？ #

• AngularJS的核心原则是分离关注点：控制器负责业务逻辑，指令负责DOM操作，这样代码结构更清晰、易维护。
• 指令可以复用在任何需要等宽高的元素上，不用每次都写重复的ID选择器逻辑。
• 我们额外处理了窗口resize的场景，确保窗口大小变化时，div高度能自动跟随宽度调整，比原生JS的基础实现更健壮。

如果特殊场景下要在控制器实现（不推荐） #

虽然不建议，但如果有特殊需求必须在控制器里编写，也可以这样做（记得注入$window和$timeout）：

angular.module('yourAppName', [])
.controller('YourController', function($scope, $window, $timeout) {
  $scope.setSquareHeight = function() {
    const targetEl = document.getElementById('cc1');
    if (targetEl) {
      const elWidth = targetEl.offsetWidth;
      targetEl.style.height = `${elWidth}px`;
    }
  };

  // 用$timeout确保DOM渲染完成后再执行初始化
  $timeout($scope.setSquareHeight);

  // 监听窗口resize事件
  angular.element($window).on('resize', function() {
    $scope.$apply($scope.setSquareHeight);
  });

  // 控制器销毁时移除监听，防止内存泄漏
  $scope.$on('$destroy', function() {
    angular.element($window).off('resize');
  });
});

对应的HTML结构：

<div ng-controller="YourController" id="cc1" style="width: 50%; background: #eee;"></div>

但还是强烈推荐用自定义指令的方式，这才是AngularJS处理DOM交互的正确打开方式～

内容的提问来源于stack exchange，提问作者Ariteku