gpt4 book ai didi

javascript - AngularJS - 默认保存属性值

转载 作者:行者123 更新时间:2023-11-28 10:21:38 29 4
gpt4 key购买 nike

我使用自己的标签“repairwidth”和属性“width”。我从这个标签得到“输入”。宽度 = 尺寸。

第一个 repairwidth 标签必须始终具有 width="50"。
第二和第三个标签 repairwidth 有 width="{{width}}"

我可以使用 ng-model="width"从输入更改宽度。但是 width="50"不起作用。

plunker

是的。我可以使用 scope: {width: '@'} 来修复它。但是在我的应用范围内肯定有假值。我不能使用 ng-init 和 ng-model。

我的错误在哪里?

<!DOCTYPE html>
<html ng-app="ang" ng-controller="ctrl">
<head>
<meta charset="utf-8" />
<title>width with scope: false</title>
</head>
<body>

<b>scope: false</b><br>
<repairwidth width="50" ></repairwidth>
input must have size=50 always
<b>Doesn't work</b><br>

<repairwidth width="{{width}}" ></repairwidth><br>

<repairwidth width="{{width}}" ></repairwidth><br><br>


<b>size for 2 & 3 inputs:</b>
<input type="text" ng-model="width" />
I can change size for 2 & 3 inputs
<b>Doesn't work</b><br>

<b>not use ng-init and ng-model</b>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var ang = angular.module("ang", []);
ang.directive('repairwidth', function(){
return {
restrict: 'E',
replace: true,
transclude: false,
scope: false,
template: '<input type="text" size="{{width}}"/>'
,
link: function(scope, element, attrs) {
attrs.$observe('width', function(value) {
if (value) element.attr('size',value);
});
}
};
});

function ctrl($scope) {
$scope.value= 'text';
}
</script>
</body>
</html>

最佳答案

因为你的指令范围是假的,指令从父级继承它的范围。这意味着您的指令的所有实例都将使用 Controller 中设置的相同 width 值。您传递给指令的宽度参数实际上被忽略了。

<repairwidth size="{{width}}" ></repairwidth>

做同样的事情

<repairwidth></repairwidth>

最简单的做法是像这样直接绑定(bind)到大小参数:

<repairwidth size="50" ></repairwidth> 
<repairwidth size="{{width}}" ></repairwidth>
<repairwidth size="{{width}}" ></repairwidth>

你甚至不需要链接功能。

Plunker .

关于javascript - AngularJS - 默认保存属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23969295/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com