can angular ngModel用于绑定到HTML元素的属性

Question

我想知道是否有一种将HTML元素的属性绑定到ngModel的角度方法。

例如，我有两个HTML元素，如果第一个元素的宽度改变，我想改变另一个元素的宽。。我认为会有一些方法将第一个元素的宽度属性绑定到模型属性，然后使用相同的模型来设置其他元素的宽度。

如何做这种场景角度的方式。

Answer 1

可能是。。。

<div ng-style="{'width':firstWidth}">
</div>
<div ng-style="{'width':secondWidth}">
</div>

还有一些控制器代码，类似于…

$scope.firstWidth = 100 + "px";
$scope.secondWidth = $scope.firstWidth;

然后在某个地方更改第一个宽度，并注意到第二个宽度将自动更改。本质上。我不知道这是否是最好的方法，因为有很多方法可以做到这一点，但这里是最简单的。

注释示例

<div ng-style="{'width':size}">
</div>
<div ng-style="{'width':size}">
</div>
 $scope.size = Whatever number your controller is giving you for this dynamic size

Answer 2

好吧，如果我明白了，你想做的就是观察一个div的宽度css属性，它可以经常改变它的大小

$scope.da_width = {};
$scope.elem = angular.element('div#first'); //jquery need it for this
$scope.$watch(function($scope) {return $scope.elem.css('width'); }, function(newValue) {
    $scope.da_width = { 'width': newValue };
});

通过这种方式，您将始终首先知道div#的宽度是多少，并且可以被分配给视图中的div#2或其他内容：

<div id="two" ng-style="da_width">...</div>