javascript - AngularJS:如何将常量对象绑定(bind)到指令

Question

我使用“范围”创建了一个带有绑定(bind)的指令。在某些情况下，我想绑定(bind)一个常量对象。例如，使用 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)

绑定(bind)常量对象而不导致错误的正确方法是什么？

Answer 1

这是我根据 @sh0ber 的回答提出的解决方案:

实现自定义link函数。如果该属性是有效的 JSON，那么它就是一个常量值，因此我们只评估它一次。否则，正常观察并更新值(换句话说，尝试表现为 = 绑定(bind))。 scope 需要设置为 true 以确保分配的值仅影响指令的此实例。

(Example on jsFiddle)

HTML:

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

JavaScript:

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

app.controller("Ctrl", function($scope) {
    $scope.jim = {firstName: 'Jim', lastName: "Bloggs"};
});

app.directive("greeting", function () {
    return {
        restrict: "E",
        replace: true,
        scope: true,
        link: function(scope, elements, attrs) {
            try {
                scope.person = JSON.parse(attrs.person);
            } catch (e) {
                scope.$watch(function() {
                    return scope.$parent.$eval(attrs.person);
                }, function(newValue, oldValue) {
                    scope.person = newValue;
                });
            }   
        },
        template: '<p>Hello {{person.firstName}} {{person.lastName}}</p>'
    };
});