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

Question

我是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代码中？

由于 奥里奥尔

Answer 1

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

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

scope: {
    slidenum: '@',
    thumbsrc: '@',
}