0

AngularJS でfoodMeの例に従おうとしています。私はステップ 21 にいます。ng-model を作成する代わりに、少し違うことを試みて、ここでPlunkerを作成しました。私の問題は、それが Restaurant.html でのみ機能し、Menu.html 内では機能しないことです。ソースを表示すると、 {{restaurant.rating}} の値も表示されます。

<span stars rating="{{restaurant.rating}}" readonly="true"></span>

HTML ビューソースでは、rating="3" を確認できます。

プランカーとサンドボックスのわずかな違いだけがサンドボックスにあります。「レストラン」リソースを使用して、個々のレストランのデータを取得します。

何か考え/アイデアはありますか？

4

1 に答える 1

1

問題は、プロパティrestaurantsがオブジェクトの配列でありMenu.html、適切な方法でアクセスしていないことです。に変更します

Menu Rating: {{restaurants[0].rating}}
<br />
<span stars rating="{{restaurants[0].rating}}" readonly="true"></span>

そしてそれはうまくいくでしょう。Restaurants.htmlを使用して配列を反復処理しているため、 では同じことは起こりませんng-repeat。

プランカーのこのフォークをチェックしてください。

更新コメントで @parsh と話した後、彼のコードの問題をよりよく理解することができました。問題は、スコープが変更されたときにディレクティブが再レンダリングされないことです。これは、時計を使用して修正できます。

link: function (scope, element, attrs, ctrl) {
    scope.$watch('rating', function() {
        scope.stars = [];
        for (var i = 0; i < 5; i++) {
            scope.stars.push({'fm-selected': i < scope.rating});
        }  
    });
}

上記の変更に加えて、ディレクティブの外部からのスコープ変更をシミュレートするボタンを追加して、 Plunker スクリプトを更新しました。

于 2013-08-15T18:26:13.087 に答える