如果我在链接函数之外指定范围，则$ w​​atch无法正常工作

Question

I just started working on an Angular app that uses flot to plot a bunch of data. It worked fine for static data, but once we got the directive wired up to mongo, I had to follow the tutorial here to get it working for updating data. I had a hell of a time for one specific reason:

This is my directive 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>

and 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();
                    }
                });
            }
        };
    }
])

As you can see in the html, I'm using the data-options attribute to pass the line1.options object into the directive. When I was just using static data and not using ng-model or the $watch function, this worked and the scope: { options: "=" } assignments were correct. However it seems that whenever I set anything on the scope outside link , it breaks the $watch . $watch always receives a data of undefined... and my scope.options are also undefined. Outside of the $watch function scope.options is correct, but that doesn't help me much if I can't use them when the data is actually plotted.

I've had to resort to hard coding the options inside link: and commenting out the outer scope assignments. I have a bunch of different charts I need to create, all of which look differently. I'd hate to have to hard code different options for EVERY one, but at the moment I don't see any other way to make this work. Is there some way I can access my other data attributes from the HTML inside the $watch function without it breaking everything?

Note: I tried attrs.options , but that just gives me a "line1.options" string, and not the actual object.

Edit1:

Updated my code per ExpertSystem's suggestions. No longer using ng-model . scope is still not available inside $watch:

Answer 1

Your directive should look like this:

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

_{Althouth the use of ngModel seems redundant here.}

---

This fiddle demonstrates that scope is indeed defined in the $watch callback.