Question

我正在尝试制作一个基本上是一个带有最大长度计数器的文本框的指令。我的指示如下。基本上是一个文本框，告诉用户他们只剩下x个字符。

angular.module('InputApp', []);

angular.module('InputApp').directive('textAreaCounter', function () {
    return {
        templateUrl: '/Content/Directives/Inputs/TextAreaCounter.html',
        restrict: 'AE',
        multiElement: true,
        scope: {
            text: '='
        },
        link: function (scope, elem, attrs) {
            if (scope.text == undefined || scope.text == '') {
                scope.CharactersLeft = attrs.totalCharacters;
            } else {
                scope.CharactersLeft = attrs.totalCharacters - scope.text.length;
            }

            scope.TextValueChanged = function () {
                scope.CharactersLeft = attrs.totalCharacters - scope.text.length;
            }
        }
    }
});

模板html是：

<div class="row">
    <div class="col-md-12">
        <textarea ng-model="text" ng-change="TextValueChanged()" autogrow rows="5"></textarea>
    </div>
</div>
<div class="row">
    <div class="col-md-12 top-left smallText">
        You have {{CharactersLeft}}.
    </div>
</div>

我使用这样的指令。

<text-Area-Counter text="WholeDeletionText" total-Characters="250"></text-Area-Counter>

我遇到的问题是指令没有更新值'WholeDeletionText'。

我的期望是父级中的scope.WholeDeletionText将使用在指令中的textarea中写入的文本进行更新。至少我对具有'='符号的孤立范围的理解是它们与父母共享它。我做错了什么或者有更好的方法吗？

Answer 1

出现问题是因为您在应用程序范围内没有WholeDeletionText变量。

要解决此问题，您需要：

1）创建控制器并初始化WholeDeletionText变量

.controller("MyController", function ($scope) {
    $scope.WholeDeletionText = '123';
});

2）在主html文件中添加ng-controller="MyController"指令。

<body ng-app="InputApp" ng-controller="MyController">
<div>
    <text-Area-Counter text="WholeDeletionText" total-Characters="250"></text-Area-Counter>
</div>
</body>

完整代码见Plunk。

Answer 2

确切地说，当你使用＆＃39; =＆＃39;时，加上@ Roman的观点。在声明指令的范围变量时，它也应该被声明为父控制器，否则你可以使用＆＃39; @＆＃39;。

Angular Directive传回范围变量

2 个答案: