javascript - AngularJs 指令 : nested ng-class is failing

Question

当我需要嵌套的 ng 类时，我遇到了 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 错误

语法错误:从 [{ 'testing': 1 == 1 }].

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

这是一个无效的 JSON。我在这里做错了什么吗？目前，我所做的解决方法是将 ng-class 移动到上层 div 元素。但这显然不是我们想要的。

Answer 1

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

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

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

你也可以在这里看到很长的讨论eec6394: deprecate replace directives