如果我在链接函数之外指定范围，则$ 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回调中定义。