AngularJS - 默认保存属性值答案

【问题标题】：AngularJS - Save attribute value by defaultAngularJS - 默认保存属性值
【发布时间】：2014-05-31 11:04:13
【问题描述】：

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

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

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

是的。我可以使用 scope: {width: '@'} 来修复它。但在我的应用范围内必须有 false 值。我不能使用 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>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

由于您的指令范围为假，该指令从父级继承其范围。这意味着您的指令的所有实例都将使用在控制器中设置的 width 的相同值。您传递给指令的宽度参数基本上被忽略了。

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

做同样的事情

<repairwidth></repairwidth>

最简单的做法是直接绑定到 size 参数，如下所示：

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

你甚至不需要链接功能。

Plunker.

【讨论】：