Directive displaying Error: [$parse:lexerr] after moving template to templateURL

Question

当 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>'
        }
    }
);

新：

app.directive('myDirective', function () {
    return {
            restrict: 'E',
            scope: {
                data: "="
            },
            templateUrl: 'home/mydirective.html'
        }
    }
);

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

Answer 1

您的 html 不应包含会在 angular $compile 该模板时造成混乱的串联。应该是普通的 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>

Answer 2

在我的例子中，这与在 .html 文件中使用带反斜杠 (\') 的单引号有关。当使用 template 将 html 直接放入指令中时，它运行良好。但是当它被放在一个单独的 .html 文件中并使用 templateUrl 时它抛出了一个错误。所以将 ng-class="{\'something\'}" 更改为 ng-class="{'something'}" 为我修复了它。希望这会为其他人节省几个小时。

Directive displaying Error: [$parse:lexerr] after moving template to templateURL

Directive displaying Error: [$parse:lexerr] after moving template to templateURL

angularjs

ng-repeat

angularjs-scope

angularjs-ng-repeat

angular-directive