2

I have a custom directive which holds a <textarea> element along with other HTML elements in its template using templateUrl. This directive should allow a user to type with any Indian Language (using any writing script like devanagri and others). The user will get to select the input language.

This directive will be used like this in my HTML:<keybuddy></keybuddy>

Now my problem is, in my main code, how should I retrieve the text entered in the textarea that is located in the template.html specified by templateUrl? I have the text available in the scope of my link function since I used ng-model on the textarea.

<textarea id="inputField"
          placeholder="start typing....."
          ng-model="inputText"
          rows="5">
</textarea>

In my index.html, I should be able to do something like this:

<keybuddy></keybuddy>
<button onclick="printText()">Show Text</button>

<script>
    var printText = function () {
        console.log($("keybuddy").value);
    }
</script>

How do I do it? Is there any other better way using the power of AngularJS? I went through these posts but wasn't helpful. Or might be I could not understand how to use it in my work. How to set a native attribute from AngularJS directive?, How to get evaluated attributes inside a custom directive

my complete code on github: keybuddy

Note:

  • I should be able to use this directive anywhere in the application, any number of times.
  • It should be portable; I should be able to use it in any of my project or any other developer should be able to use it without much
Community
  • 1
  • 1
Shri
  • 834
  • 1
  • 12
  • 36

3 Answers3

1

You can setup a bi-directional binding to the directive scope. This will allow your directive to change a value in the parent scope, which you can then read from your controller.

In your directives configuration setup the scope property with the name of an attribute to use for the binding, such as:

scope: { 
    model: '='
}

In your directive's template then you can set the textarea's ng-model to that binding name. 

<textarea ng-model="model"></textarea>

In the parent where you use the directive, pass the attribute you configured set to the name of a variable on the scope.

<keybuddy model="inputText"></keybuddy>

Then in your controller you can access the textarea's current content by reading $scope.inputText.

$scope.printText = function(){
    alert($scope.inputText);
}

Template:

<button ng-click="printText();">Print text</button>
kicken
  • 2,122
  • 14
  • 17
  • What when I use `` twice in an HTML? I need to retrieve textarea values from both instances separately. – Shri Mar 01 '16 at 08:21
  • Just assign them separate variables on the scope. `` and ``. Use `$scope.inputText1` and `$scope.inputText2` to read the values. – kicken Mar 01 '16 at 08:22
1

Go Angular :-)

You don't need the use of jQuery here. Angular is sufficient enough. You can change your code like this:

In your View:

<keybuddy model="myInputText"></keybuddy>

<button ng-click="showText()">Show Text</button>

In your View controller:

$scope.showText = function() {
    console.log($scope.myInputText);
}

And update your directive to have scope like below (replace your `scope: true):

scope: {
    inputText: '=model'
}

Read more on Isolating scope of a directive

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
0

Since it's already in the scope, you could simply use

console.log($("keybuddy textarea").scope().inputText);

AngularJS version:

console.log(angular.element("keybuddy textarea").scope().inputText);

EDIT: Adapted to match the actual source code.

Jean-Loup Roussel-Clouet
  • 3
  • 2