Question

当我需要嵌套的ng-class时，我面临一个与AngularJs指令有关的奇怪问题。 Here是一个JSFiddle，用于显示假设情况下的问题。

HTML

<div in-directive ng-class="{ 'testing1': 1 == 1 }"></div>

的Javascript

var myApp = angular.module('myApp', []);

myApp.directive('inDirective', function () {
    return {
        restrict: 'A',
        replace: true,
        template: '<div ng-class="{ \'testing\': 1 == 1 }">Hi</div>'
    };
});

AngularJS错误

语法错误：令牌'{'是表达式[{'testing11'：1 == 1} {'testing'：1 == 1}]第25列的意外标记，从[{'testing'开始： 1 == 1}]。

[{ 'testing11': 1 == 1 } { 'testing': 1 == 1 }]

这是一个无效的JSON。我在这里做错了吗？目前，我所做的解决方法是将ng-class移动到高级div元素。但这显然是不可取的。

Answer 1

这个类似的问题已在此处报告#8159 Directive with 'replace: true' and template。

当使用template/templateUrl和replace标志设置为true的指令时，AngularJS团队决定不支持复杂的属性合并。

这个问题是他们are deprecating replace指令标志的原因之一。

您还可以在此处查看详细讨论eec6394: deprecate replace directives

Answer 2

如果你有2个元素属性，一个在元素中，一个在模板中，angular会连接字符串，导致表达式无效。

如果你在你的小提琴中查看HTML，这就是元素的含义：

<div ng-class="{ 'testing1': 1 == 1 } { 'testing': 1 == 1 }" in-directive="">Hi</div>

AngularJs指令：嵌套的ng-class失败

2 个答案: