指令は、私はjQueryプラグイン機能を実行することになっています非常に単純なディレクティブ持っているので、

Question

スコープ変数をロードしません。

<select class="service-rating" 
     ng-show="!!currentJob.Review.ServiceRating" 
     star-rating rating="currentJob.Review.ServiceRating"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

「currentJob」変数：ここ

angular.module('myproject.directives').directive('starRating', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      rating: '=' 
     }, 
     link: function (scope, elem, attr) { 
      console.log('rating', scope.rating); 

      elem.barrating({ 
       theme: 'css-stars', 
       readonly: true 
      }); 

      elem.barrating('set', scope.rating); 
     } 
    }; 
}); 

はHTMLです$ http呼び出しの後でのみ設定されますが、divにはこの値が設定された後にshowに設定されます。ログはscope.ratingに対して 'null'を戻していますが、「スコープ」をログに記録すると、予想どおりに設定された「評価」プロパティが明確に表示されます。

また、 'rating'属性のハードコード番号を入力するだけで、ディレクティブは期待通りに機能します。

ここでどこが間違っているのか分かりません。何か案は？

Answer 1

基本的にあなたがng-showを使用しているとして、あなたのディレクティブはAjaxから取得し、あなたのstar値の前にDOMツリーにロードされる問題は、それが処理され、barratingがstar値0でDOMに添付されます。基本的にはng-showは、DOM上でdisplay CSSプロパティを切り替えるだけで、html上にDOMを非表示または表示します。

スター型コンポーネントを動作させるための2つのオプションがあります。

1. star評価を更新するためのコンポーネントの内部に代わりng-show

2. 利用$watchの使用ng-if（これは行くには良いソリューションとなります）。

   link: function (scope, elem, attr) { 
       console.log('rating', scope.rating); 
   
       elem.barrating({ 
        theme: 'css-stars', 
        readonly: true 
       }); 
       scope.$watch('star', function(newValue){ 
        elem.barrating('set', newValue); 
       }); 
   } 
   

3. 両方の組み合わせがあります。評価が表示されている場合にのみ、ng-if &を入力してください。$watchに変更があった場合、barrating要素を更新してください。

Answer 2

変更の評価の変化に反応するためのディレクティブ：

rating属性によって定義された角度表現への変更のためのサイクルごとにダイジェストウォッチャーチェックの上、このようにコード化された

app.directive('starRating', function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function (scope, elem, attr) { 

      elem.barrating({ 
       theme: 'css-stars', 
       readonly: true 
      }); 

      scope.$watch(attr.rating, function (newValue) { 
       elem.barrating('set', newValue); 
       console.log('rating', newValue); 
      }); 

     } 
    }; 
}); 

、および更新barratingプラグインが適切です。

---

更新

私は時計を使用するのでは思いましたが、私は私の元の設定が機能しなかった理由として興味がありました。

ディレクティブが初期化されると、星の評価が設定されるため、元の設定は機能しませんでした。ディレクティブが初期化された後にサーバーからデータが到着するため、新しいデータはプラグインで認識されません。時計を使用することにより、コントローラが値をサーバから受信した時刻を含む変数を変更するたびに設定が更新されます。

もう1つの答えは、特定のスコープ変数（賢明ではない）を監視することにも注意してください。特定のスコープ変数を宣言するために属性を使用することが賢明です。より多目的な指令になります。

AngularJSバインディングを使用するテンプレートがディレクティブにない場合、はスコープを隔離しないようにしてください。この例に示すように、属性に直接時計を置きます。