错误:[$ parse:lexerr] Lexer错误:表达式[http://placehold.it/100x50&text=slide5]中第26-26列[&]处的意外下一个字符

问题描述 投票:0回答:1

我是Angularjs的新手。我正在尝试定义一个指令,它将使用以下maner中自定义元素中使用的参数。

我们使用以下html调用该指令:

<ac-thumbnail slidenum='5' thumbsrc="http://placehold.it/100x50&text=slide5" class='active'></ac-thumbnail>

我试图生成的指令应输出以下html:

<li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>

该指令使用以下代码定义:

angular.module('testAppApp')
  .directive('acThumbnail', function () {
    return {
  template: '<li data-target="#carousel-custom" data-slide-to="{{slidenum}}"><img ng-src="{{thumbsrc}}" alt="" /></li>',
      restrict: 'EA',
      controller: 'ActhumbnailCtrl',
      scope: {
        slidenum: '=slidenum',
        // thumbsrc: '=thumbsrc',
      }  
    };
  });

如果我取消注释// thumbsrc:'= thumbsrc',它几乎可以工作,生成以下HTML:

<ac-thumbnail slidenum="5" thumbsrc="http://placehold.it/100x50&amp;text=slide5" class="active ng-isolate-scope">
    <li data-target="#carousel-custom" data-slide-to="5"><img alt=""></li>
</ac-thumbnail>

另一方面,如果我没有注释掉该行,我会收到以下错误:

    Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 26-26 [&] in expression [http://placehold.it/100x50&text=slide5].
http://errors.angularjs.org/1.3.13/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%2026-26%20%5B%26%5D&p2=http%3A%2F%2Fplacehold.it%2F100x50%26text%3Dslide5
    at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12)
    at Lexer.throwError (http://localhost:9000/bower_components/angular/angular.js:11839:11)
    at Lexer.lex (http://localhost:9000/bower_components/angular/angular.js:11798:16)
    at Parser.parse (http://localhost:9000/bower_components/angular/angular.js:11959:30)
    at $parse (http://localhost:9000/bower_components/angular/angular.js:12678:39)
    at http://localhost:9000/bower_components/angular/angular.js:7652:29
    at forEach (http://localhost:9000/bower_components/angular/angular.js:331:20)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7627:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7078:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7081:13)

关于这个问题,我有两个问题:

  1. 为什么我在尝试访问带有URL的属性时出现此错误?我该如何解决?
  2. 有没有办法创建指令,以便ac-thumbnail标记不出现在最终的HTML代码中?

谢谢Oriol

angularjs angularjs-directive
1个回答
0
投票

终于找到了我的问题的解决方案。

只需按以下方式定义指令的范围:

scope: {
    slidenum: '@',
    thumbsrc: '@',
}
© www.soinside.com 2019 - 2024. All rights reserved.