Question

我使用自己的标签＆＃39; repairwidth＆＃39;具有属性＆＃39; width＆＃39;。我得到了输入＆＃39;从这个标签。宽度=尺寸。

第一个修复宽度标签必须具有宽度=＆＃34; 50＆＃34;始终。
第二个和第三个标签repairwidth有width =＆＃34; {{width}}＆＃34;

我可以使用ng-model =＆＃34; width＆＃34;来改变输入的宽度。但宽度=＆＃34; 50＆＃34;不起作用。

是。我可以使用范围：{width：＆＃39; @＆＃39;}来修复它。但在我的应用程序范围内必须具有错误值。我不能使用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>

Answer 1

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

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

和

做同样的事情

<repairwidth></repairwidth>

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

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

您甚至不需要链接功能。

Plunker

AngularJS - 默认情况下保存属性值

1 个答案: