我怎么能传递包含[$指数]进入我的指令一些字符串? [英] How can I pass some string containing [$index] into my directive?

查看:181
本文介绍了我怎么能传递包含[$指数]进入我的指令一些字符串?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想设置上是在指令调用中使用数据属性一些文本:

 < TextArea类=PageDown键管理员wmd- ​​preVIEW-23
   数据模式=莫代尔
   数据下页管理员
   数据-NG-模式=answer.text
   数据PID =answer.answerId
   数据字段={{'modal.data.answers ['+ $指数+']的.text'}}
   ID =模态数据回答 - {{$指数}}>< / textarea的>

它给语法错误,不管我怎么努力。没有人有任何想法可能是错误的?我想在一个字段名传递与来自AngularJS NG重复内的数组索引

  app.directive('pagedownAdmin',函数($编译){
    变种nextId = 0;
    VAR markdownConverter =新Markdown.Converter();
    变种converter1 = Markdown.getSanitizingConverter();    converter1.hooks.chain(preBlockGamut功能(文字,RBG){
        返回text.replace(/ ^ {0,3}* \\ N((?:?* \\ N)+){0,3}* $ /克,功能(全,内) {
            返回<&BLOCKQUOTE GT; + RBG(内)+< / BLOCKQUOTE> \\ N的;
        });
    });    返回{
        要求:'ngModel',
        更换:真实,
        范围: {
            现场:'=场',
            模态:'=模态',
            PID:'= PID
        },
        模板:'< D​​IV CLASS =PageDown键,引导编辑器>< / DIV>,
        链接:功能(范围,元素,ATTRS,ngModel){

后来在我的指导我有:

  $范围的eval(attrs.field +=+ rawContent)。
            。范围$适用();

然而,它似乎并没有得到做$ EVAL它给人的错误之前的点。

这里的语法错误:

 错误:[$解析:语法] 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
    在错误(小于匿名>)
    在http://127.0.0.1:81/Scripts/angular-v1.2.3/angular.min.js:6:449


解决方案

下面是一个例如

你应该把它写像这样:

 < textarea的数据字段={{modal.data.answers [$指数]的.text}}>

但你也应该使用文字绑定语法 @ ),而不是在双向绑定语法 = )参考父范围的领域时:

范围:{
  现场:'@',
},

在短,@语法支持插值而=语法不!

您一定要阅读:<一href=\"http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope\">What在指令范围内的'@'和'='区别


我总是喜欢在可能的时候显示源$ C ​​$ C:

compile.js 有一个 nodeLinkFn 函数,在里面你可以看到这些情况:

 情况下,@:
  ATTRS。$观察(attrName,功能(价值){
    isolateScope [scopeName] =价值;
  });
  。ATTRS $$观察家[attrName] $$范围=范围;
  如果(ATTRS [attrName]){
    //如果属性已经提供那么我们触发插值保证
    //值是那里的链接使用FN
    isolateScope [scopeName] = $插补(ATTRS [attrName])(范围);
  }
  打破;情况下=:  // ......一些code在这里  isolateScope。$腕表(功能parentValueWatch(){    // ......一些code在这里  },空,parentGet.literal);
  打破;

摘要:


  • 当使用'@'语法角度使用 $观察(内部使用的 $插值 $看

  • 当使用=语法角度使用 $手表,它不支持插值。

  • Difference观察员和看守之间

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

解决方案

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


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.
  • Difference Between Observers and Watchers

这篇关于我怎么能传递包含[$指数]进入我的指令一些字符串?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆