How can I pass some string containing [$index] into my directive?

Question

I am trying to set some text on a data attribute that is used in a directive call:

<textarea class="pagedown-admin wmd-preview-23"
   data-modal="modal"
   data-pagedown-admin
   data-ng-model="answer.text"
   data-pid="answer.answerId"
   data-field="{{'modal.data.answers[' + $index + '].text'}}"
   id="modal-data-answer-{{$index}}"></textarea>

It's giving syntax errors no matter what I try. Does anyone have any idea what could be wrong? I want to pass in a field name with an array index value from inside an AngularJS ng-repeat.

app.directive('pagedownAdmin', function ($compile) {
    var nextId = 0;
    var markdownConverter = new Markdown.Converter();
    var converter1 = Markdown.getSanitizingConverter();

    converter1.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    return {
        require: 'ngModel',
        replace: true,
        scope: {
            field: '=field',
            modal: '=modal',
            pid: '=pid'
        },
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, element, attrs, ngModel) {

Later in my directive I have:

            scope.$eval(attrs.field + "=" + rawContent);
            scope.$apply();

However it does not appear to get to the point of doing the $eval before it gives the error.

Here's the syntax error:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.3/$parse/syntax?p0='modal.data.answers%5B'&…7D%7D&p4='modal.data.answers%5B'%20%2B%20%24index%20%2B%20'%5D.text'%7D%7D
    at Error (<anonymous>)
    at http://127.0.0.1:81/Scripts/angular-v1.2.3/angular.min.js:6:449

Can you show some of `data-field`? Are you using isolated scope? — Davin Tryon, Jan 06 '14 at 16:40
@Davin - The problem is it seems to get upset before even getting to the directive. I will add the directive header to the question. — Samantha J T Star, Jan 06 '14 at 16:59
@DavinTryon - This sends modal.data.answers[$index].text to the directive. The $index is not filled with a number as needed. — Samantha J T Star, Jan 06 '14 at 17:46

score 0 · Answer 1 · edited May 23 '17 at 12:13

Here is an example

You should write it like so:

<textarea data-field="{{modal.data.answers[$index].text}}" >

But you should also use the Text Binding syntax (@) rather than the Two-way Binding syntax (=) when referring to field of parent scope:

scope: {
  field: '@',            
},

In short, "@" syntax supports interpolation while "=" syntax doesn't!

You should definitely read this: What is the difference between '@' and '=' in directive scope in AngularJS?

I always like to show the source code when possible:

In compile.js there is a nodeLinkFn function, Inside you can see these cases:

case '@':
  attrs.$observe(attrName, function(value) {
    isolateScope[scopeName] = value;
  });
  attrs.$$observers[attrName].$$scope = scope;
  if( attrs[attrName] ) {
    // If the attribute has been provided then we trigger an interpolation to ensure
    // the value is there for use in the link fn
    isolateScope[scopeName] = $interpolate(attrs[attrName])(scope);
  }
  break;

case '=':

  // ....... some code here

  isolateScope.$watch(function parentValueWatch() {

    //...... some code here

  }, null, parentGet.literal);
  break;

Summary :

when using '@' syntax angular uses $observe (which internally uses $interpolate and $watch)
when using '=' syntax angular uses $watch, which does not support interpolations.
AngularJS : Difference between the $observe and $watch methods

How can I pass some string containing [$index] into my directive?

1 Answers1

You should write it like so:

I always like to show the source code when possible:

Summary :

Linked