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

Why does referencing object property passed in as attribute in angular directive cause error?

本文关键字:属性 对象 错误 引用 指令 为什么      更新时间:2023-09-26

请参阅此 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 中的控制台(。我知道错误是在模型"不稳定"时引起的 - 但是在这种情况下是什么导致了不稳定?值/属性不会更改。在不导致错误的情况下获得相同结果的正确方法是什么?

我认为

这个错误只是告诉你你在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>

参见演示小提琴