如果我在链接函数之外指定范围，则$ w​​atch不起作用

Question

我刚开始研究使用flot绘制一堆数据的Angular应用程序。它适用于静态数据，但是一旦我们将指令连接到mongo，我就必须遵循教程here来使其更新数据。出于某个特定原因，我有一段时间了：

这是我的指令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:内的选项的硬编码并评论外部范围分配。我有一堆我需要创建的不同图表，所有这些图表看起来都不同。我不想为每个人编写不同的选项，但目前我还没有看到任何其他方法来完成这项工作。有没有什么方法可以从$watch函数中的HTML访问我的其他数据属性而不会破坏所有内容？

注意：我尝试了attrs.options，但这只是给了我一个＆＃34; line1.options＆＃34;字符串，而不是实际的对象。

EDIT1：

根据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的使用似乎多余。}

---

This fiddle 表明scope回调确实定义了$watch。