Angular Directive Pass back scope variable

Question

I am trying to make a directive that is basically a text box with a max length counter on it. My directive is below. Basically a text box that will tell the user that they only have x number of characters left.

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;
            }
        }
    }
});

The template html is:

<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>

And I use the directive like this.

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

The issue that I am having is that the value 'WholeDeletionText' is not being updated by the directive.

My expectation is that the scope.WholeDeletionText in the parent would update with the text that was written in the textarea in the directive. At least my understanding of the isolated scope having the '=' sign is that they share it with the parent. What am I doing wrong or is there a better way to do it?

Roman Cherepanov · Accepted Answer · 2018-04-12 20:49:45Z

1

The problem occurs because you have not WholeDeletionText variable in the application scope.

To fix it you need:

1) create controller and initialize WholeDeletionText variable

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

2) add ng-controller="MyController" directive in your main html file.

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

Full code see in Plunk.

answered Apr 12, 2018 at 20:49

Roman Cherepanov

1,8154 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davidkonrad Over a year ago

Yes+1. The first part is the straight answer, the second part rather irrelevant.

Yaswanth Akula · Accepted Answer · 2018-04-17 19:20:34Z

0

Exactly, adding to the @Roman's point, when you use '=' in declaring the directive's scope variable it should be declared the the parent controller as well, otherwise you can use '@'.

answered Apr 17, 2018 at 19:20

Yaswanth Akula

112 bronze badges

Collectives™ on Stack Overflow

Angular Directive Pass back scope variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related