如果我在鏈接函數之外指定范圍，則$ w​​atch無法正常工作

Question

我剛開始使用Angular應用程序工作，該應用程序使用flot繪制了大量數據。 它適用於靜態數據，但是一旦將指令連接到mongo，我就必須按照此處的教程進行操作，以使其能夠更新數據。 我因某個特定原因而度過了一段時光：

這是我的指令HTML：

<div class="panel-body" data-ng-controller="flotChartCtrl">
  <div data-flot-line-chart data-data="revenueData.data" data-options="line1.options" style="width: 100%; height: 300px;"></div>
</div>

和javascript：

.directive("flotLineChart", [
    function () {
        return{
            restrict: 'A',
            scope: {
                data: "=",
                options: "="
            },
            link: function(scope, elem, attrs){
                var chart = null;
                // var options = { ... };

                scope.$watch('data', function(data, oldData) {
                    if(!chart) {
                        chart = $.plot(elem, data, options);
                        elem.show();
                    } else {
                        chart.setData(data);
                        chart.setupGrid();
                        chart.draw();
                    }
                });
            }
        };
    }
])

正如您在html中看到的那樣，我正在使用data-options屬性將line1.options對象傳遞到指令中。 當我只使用靜態數據而不使用ng-model或$watch函數時，此方法有效且scope: { options: "=" }分配是正確的。 但是，似乎每當我在link外部的作用域上設置任何內容時，它都會破壞$watch 。 $watch總是收到未定義的data ...，而我的scope.options也未定義。 在$watch函數的scope.options是正確的，但是如果在實際繪制數據時無法使用它們，那對我沒有太大幫助。

我不得不求助於對link:內部的選項進行硬編碼link:並注釋掉外部作用域分配。 我有一堆需要創建的不同圖表，所有這些圖表看起來都不同。 我不願意為每個選項都硬編碼不同的選項，但是目前我看不到任何其他方法可以使這項工作實現。 有什么方法可以通過$watch函數中的HTML訪問我的其他數據屬性，而不破壞所有內容？

注意：我嘗試了attrs.options ，但這只是給我一個“ line1.options”字符串，而不是實際的對象。

編輯1：

根據ExpertSystem的建議更新了我的代碼。 不再使用ng-model 。 $ watch scope仍然不可用：

Answer 1

您的指令應如下所示：

...
restrict: 'A',
scope: {
    data:    '=ngModel',
    options: '='
},
link: function(scope, elem, attrs){
    ...
    scope.$watch('data', function(newValue, oldValue) {
        ...

_{ngModel在這里ngModel的使用似乎是多余的。}

---

這個小提琴表明， scope確實在$watch回調中定義。