javascript - 为什么在角度指令中引用作为属性传入的对象属性会导致错误？

Question

请参阅此 plnkr http://plnkr.co/edit/pj4TwkV7icMp4IdyReZP?p=preview 对象作为指令的属性传入。

<shape type="person" shirt="blue" dta="{name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'camping'] }"></shape>

然后像这样在模板中引用属性<h1>Age:{{dta.age}}</h1>

尽管它正确显示了属性值，但它也会导致此错误 $rootScope:infdig] 10 $digest() 迭代次数达到。中止！（请参阅 plnkr 中的控制台）。我知道当模型“不稳定”时会导致错误 - 但在这种情况下导致不稳定的原因是什么？值/属性不会改变。在不导致错误的情况下实现相同结果的正确方法是什么？

Answer 1

我认为这个错误只是告诉你你在 HTML 中创建的值太长了：{name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'camping'] }.

将模型作为 HTML 属性不是好的做法（MVC 模式）。

<shape type="person" shirt="blue" dta="{name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'hiking'] }"></shape>

我建议在控制器中创建dta对象：

 $scope.dta = {
    name:'SomeName',
    age:'21',
    Hobbies:['reading', 'coding', 'hiking'] 
    };

并更改shape元素，例如：

<shape type="person" shirt="blue" dta="dta"></shape>

看演示Fiddle