AngularJS:如何将常量对象绑定到指令 [英] AngularJS: how to bind a constant object to a directive

问题描述

我已经使用范围"创建了一个带有绑定的指令.在某些情况下，我想绑定一个常量对象.例如，使用 HTML:

<greeting person="{firstName: 'Bob', lastName: 'Jones'}"></greeting>

和 JavaScript:

var app = angular.module('myApp', []);app.controller("Ctrl", function($scope) {});app.directive(问候"，函数(){返回 {限制:E"，替换:真的，范围: {人:="},模板:'<p>你好 {{person.firstName}} {{person.lastName}}</p>'};});

虽然这有效，但也会导致 JavaScript 错误:

错误:已达到 10 次 $digest() 迭代.中止！

(小提琴演示问题)

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

解决方案

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

实现自定义link 功能.如果该属性是有效的 JSON，则它是一个常量值，因此我们只对其进行一次评估.否则，照常观察和更新值(换句话说，尝试表现为 = 绑定).scope 需要设置为 true 以确保分配的值只影响指令的这个实例.

(jsFiddle 示例)

HTML:

<greeting person='{"firstName": "Bob", "lastName": "Jones"}'></greeting><greeting person="jim"></greeting>

JavaScript:

var app = angular.module('myApp', []);app.controller("Ctrl", function($scope) {$scope.jim = {firstName: 'Jim', lastName: "Bloggs"};});app.directive(问候"，函数(){返回 {限制:E"，替换:真的，范围:真实，链接:函数(范围，元素，属性){尝试 {scope.person = JSON.parse(attrs.person);}赶上(e){范围.$watch(function() {返回范围.$parent.$eval(attrs.person);}，函数(新值，旧值){scope.person = newValue;});}},模板:'<p>你好{{person.firstName}} {{person.lastName}}</p>'};});

I've created a directive with a binding using "scope". In some cases, I want to bind a constant object. For instance, with HTML:

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

and 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>'
    };
});

Although this works, it also causes a JavaScript error:

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

(Fiddle demonstrating the problem)

What's the correct way to bind a constant object without causing the error?

解决方案

Here's the solution I came up with, based on @sh0ber's answer:

Implement a custom link function. If the attribute is valid JSON, then it's a constant value, so we only evaluate it once. Otherwise, watch and update the value as normal (in other words, try to behave as a = binding). scope needs to be set to true to make sure that the assigned value only affects this instance of the directive.

(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>'
    };
});

这篇关于AngularJS:如何将常量对象绑定到指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！