Angularjs 将模板移动到templateURL后，指令显示错误：[$parse:lexerr]

我有一个指令，当HTML标记写在指令的模板部分时，它可以正常工作

我刚刚将HTML标记移动到一个.HTML文件中，在加载页面时，我看到：

Error: [$parse:lexerr] http://errors.angularjs.org/1.3.14/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%2016-16%20%5B%5C%5D&p2=option.name%20%3D%3D%3D%20%5C'choices%5C'

原始指令：

app.directive('myDirective', function () {
    return {
            restrict: 'E',
            scope: {
                data: "="
            },
            template: '<p>' +
            '<div ng-repeat="select in data.output">' +
            '<div ng-if= "select.name === \'choices\'">' +
            '<p ng-repeat="choice in select.value"><label><input type="radio" ng-model="data.input[0].value" ng-value="$index" >{{choice}}</label></p>' +
            '</div>' +
            '</div>' +
            '</p>'
        }
    }
);

---

I页面加载我可以看到mydirective.html的http请求，标记是正确的，但是lexerr随后会出现在控制台中。

您的html不应该包含连接，这会在使用该模板时弄乱。它应该是纯html

mydirective.html

<p>
    <div ng-repeat="select in data.output">
        <div ng-if="select.name === 'choices'">
            <p ng-repeat="choice in select.value">
                <label>
                    <input type="radio" ng-model="data.input[0].value" ng-value="$index">{{choice}}</label>
            </p>
        </div>
    </div>
</p>

{{choice}}

在我的例子中，这与在

.html

-文件中使用带反斜杠（

\'

）的单引号有关。使用

template

将html直接放在指令中时，它工作得很好。

---

但是当它被放入一个单独的

.html

-文件并使用

模板URL

时，它抛出了一个错误。因此，将

ng class=“{'something\'}”更改为
ng class=“{'something'}”
为我解决了这个问题。希望这能为其他人节省几个小时。
将您的html也放在“mydirective.html”中。这可能是个问题。如果您可以创建一个Fiddle，您的html标记应该是
”
{{choice}}
，不带字符串concatenation@pankajparkar-谢谢你解决了这个问题。@OamPsy我已经添加了答案。.看看它，Hanks，在第三行，你的div不应该包含\；）@OamPsy谢谢你的提醒..我编辑了我的答案..投赞成票并接受它..如果它对你有用..）
<p>
    <div ng-repeat="select in data.output">
        <div ng-if="select.name === 'choices'">
            <p ng-repeat="choice in select.value">
                <label>
                    <input type="radio" ng-model="data.input[0].value" ng-value="$index">{{choice}}</label>
            </p>
        </div>
    </div>
</p>