AngularJS：如何将常量对象绑定到指令

Question

我已经使用“ scope”创建了带有绑定的指令。在某些情况下，我想绑定一个常量对象。例如，使用HTML：

<div ng-controller="Ctrl">
    <greeting person="{firstName: 'Bob', lastName: 'Jones'}"></greeting>
</div>

和JavaScript：

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

app.controller("Ctrl", function($scope) {

});

app.directive("greeting", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            person: "="
        },
        template:
        '<p>Hello {{person.firstName}} {{person.lastName}}</p>'
    };
});

尽管可以，但是也会导致JavaScript错误：

Error: 10 $digest() iterations reached. Aborting!

(Fiddle demonstrating the problem)

绑定常量对象而不引起错误的正确方法是什么？

Answer 1

这是我想出的解决方案，基于@ sh0ber的答案：

Answer 2

您会收到此错误，因为Angular每次都会评估表达式。 '='用于变量名。

Answer 3

另一个选项：

Answer 4

这是因为如果您使用=类型的作用域字段链接，则将观察该属性值的更改，但要测试其引用是否相等（使用!==），而不是对其进行深入的相等性测试。内联指定对象字面量将导致angular在每次访问属性以获取其值时都会创建新对象-因此，当angular对脏值进行脏检查时，将旧值与当前值进行比较总是会发出更改信号。

Answer 5

我不特别喜欢使用eval()，但是如果您真的想使它与您提供的HTML一起使用：

Answer 6

我有同样的问题，我通过在编译步骤中解析json解决了它：