指令未加載范圍變量

Question

所以我有一個非常簡單的指令，應該執行一個jQuery插件函數：

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：

<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>

僅在$ http調用之后設置'currentJob'變量，但是div僅在填充后才顯示。 日志返回scope.rating的“ null”，但是，如果我自己記錄“ scope”，則它清楚地表明已按預期填充了“ rating”屬性。

另外，如果我只是為'rating'屬性輸入一個硬編碼的數字，則該指令將按預期工作。

我不確定自己在哪里出問題了嗎？ 有任何想法嗎？

Answer 1

本質上來說，問題在於，當您使用ng-show ，您的指令在從Ajax檢索到您的star值之前barrating加載到DOM樹中，該指令已處理並barrating給star值為0 DOM。 基本上ng-show所做的是，它只是通過在DOM上切換display css屬性來在html上隱藏或顯示DOM。

因此，您可以有兩種選擇來使星形組件正常工作。

1. 使用ng-if代替ng-show

2. 在組件內使用$watch更新star （這將是一個很好的解決方案）。

    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

更改指令以響應等級更改：

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

        }
    };
});

以這種方式進行編碼，觀察者在每個摘要循環中檢查一下rating屬性定義的Angular Expression的更改，並適當地更新了barrating插件。

---

更新

我確實考慮過要使用手表，但對為什么我的原始設置不起作用感到好奇。

原始設置無效，因為在指令初始化時它只能設置一次星級。 由於指令初始化后數據從服務器到達，因此插件無法看到新數據。 通過使用手表，每次控制器更改變量（包括從服務器到達值的時間）時，設置都會更新。

還要注意，另一個答案將手表硬連線到特定的作用域變量（不明智）。 使用屬性聲明特定范圍變量是更明智的。 它使指令更加通用。

當指令缺少使用AngularJS綁定的模板時，最好避免使用孤立范圍 。 如本例所示，將手表直接放在屬性上。