Question

我有百分比宽度的div，我想在AngularJS中编写脚本，将div高度设置为与width一样。我已经用纯JavaScript完成了这个。

function heightSameAsWidth(){
  var w = document.getElementById("cc1").offsetWidth;
  document.getElementById("cc1").style.height = w+"px";
}

Answer 1

这可以使用属性指令完成。如果组件的宽度百分比没有变化，您可以编写一个将在指令的postLink函数中调用的函数，例如：

function link(scope, element, attrs) {

  function setHeight() {
    element.css("height", element.css("width"));
  }

  setHeight();
}

另一方面，如果元素的百分比宽度可能会改变，那么另一种方法可以是宽度存储在父级范围内（类似于Kavindra在上述评论中的另一种解决方案）。将此元素包装在组件中，并将宽度指定为绑定。例如：

<square-component width="$ctrl.width"></square-component>

然后，在组件的控制器中定义一个名为setDimensions（）的方法，该方法将宽度和高度设置为宽度绑定的值。在组件的$ onChanges方法中，检查宽度何时更改，然后再次调用setDimensions（）方法。这样，您可以使用JavaScript从父组件随时更改宽度。

$onChanges(changes) {
   if (changes.width) {
       setDimensions();
   }
}

setDimensions() {
   this.$element.css("width", this.width);
   this.$element.css("height", this.height);
}

AngularJS - 设置高度与宽度相同

1 个答案: