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

发布时间：2020-12-17 07:44:37 所属栏目：安全来源：网络整理

导读：我使用“scope”创建了一个绑定的指令.在某些情况下,我想绑定一个常量对象.例如,使用 HTML： div ng-controller="Ctrl" greeting person="{firstName: 'Bob',lastName: 'Jones'}"/greeting/div 和JavaScript： var app = angular.module('myApp',[]);app.con

我使用“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)

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

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

实现自定义链接功能.如果属性是有效的JSON,那么它是一个常量值,所以我们只评估一次.否则,正常观察和更新值(换句话说,尝试作为=绑定的行为).范围需要设置为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',function($scope) {
    $scope.jim = {firstName: 'Jim',lastName: "Bloggs"};
});

app.directive("greeting",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>'
    };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!