My custom tags use 'repairwidth' with the 'width' attribute to get input. The width is determined by the size.
The first repairwidth tag always has a width of 50.
The second and third repairwidth tags have a dynamic width based on "{{width}}".
I can modify the width using ng-model="width", but setting width="50" directly doesn't seem to work.
Here is a link to a plunker example.
To resolve this issue, I attempted to use scope: {width: '@'}, but for my application, scope must remain false. Unfortunately, I cannot utilize ng-init or ng-model in this scenario.
What am I doing wrong?
<!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>