AngularJs指令:嵌套的ng-class失败了



当我需要嵌套ng-class时,我面临着AngularJs指令的一个奇怪问题。下面是一个JSFiddle,它在一个假设的情况下显示了这个问题。

<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误差

语法错误:从[{'testing': 1 == 1}]开始的表达式[{'testing11': 1 == 1}]的第25列上的令牌'{' testing': 1 == 1}]处的令牌'{' testing': 1 == 1}。

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

这是无效的JSON。我做错什么了吗?目前,我所做的解决方法是将ng类移动到div元素的上部。但这显然不是我们想要的。

类似的问题已经在这里报告了#8159指令与'replace: true'和模板。

并且AngularJS团队已经决定,当使用template/templateUrlreplace标志设置为true的指令时,不支持复杂的属性合并。

这个问题是他们不赞成使用指令的replace标志的原因之一。

您还可以在这里看到一个很长的讨论eec6394:弃用replace指令

当你有两个这样的元素属性时,一个在元素中,一个在模板中,angular会将字符串连接起来,导致表达式无效。

如果您查看您的小提琴的HTML,这是元素变成:

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

最新更新