指令$ watch不会在更改时触发

Question

i have the following directive:

    angular.module('ui.jq', ['ui.load']).
  value('uiJqConfig', {}).
  directive('uiJq', ['uiJqConfig', 'JQ_CONFIG', 'uiLoad', '$timeout', function uiJqInjectingFunction(uiJqConfig, JQ_CONFIG, uiLoad, $timeout) {

  return {
    restrict: 'A',
    compile: function uiJqCompilingFunction(tElm, tAttrs) {

      if (!angular.isFunction(tElm[tAttrs.uiJq]) && !JQ_CONFIG[tAttrs.uiJq]) {
        throw new Error('ui-jq: The "' + tAttrs.uiJq + '" function does not exist');
      }
      var options = uiJqConfig && uiJqConfig[tAttrs.uiJq];

      return function uiJqLinkingFunction(scope, elm, attrs) {

        function getOptions(){
          var linkOptions = [];

          // If ui-options are passed, merge (or override) them onto global defaults and pass to the jQuery method
          if (attrs.uiOptions) {
            linkOptions = scope.$eval('[' + attrs.uiOptions + ']');
            if (angular.isObject(options) && angular.isObject(linkOptions[0])) {
              linkOptions[0] = angular.extend({}, options, linkOptions[0]);
            }
          } else if (options) {
            linkOptions = [options];
          }
          return linkOptions;
        }

        // If change compatibility is enabled, the form input's "change" event will trigger an "input" event
        if (attrs.ngModel && elm.is('select,input,textarea')) {
          elm.bind('change', function() {
            elm.trigger('input');
          });
        }

        // Call jQuery method and pass relevant options
        function callPlugin() {
          $timeout(function() {
            elm[attrs.uiJq].apply(elm, getOptions());
          }, 0, false);
        }

        function refresh(){
          // If ui-refresh is used, re-fire the the method upon every change
          if (attrs.uiRefresh) {
            scope.$watch(attrs.uiRefresh, function() {
              callPlugin();
            });
          }
        }

        if ( JQ_CONFIG[attrs.uiJq] ) {
          uiLoad.load(JQ_CONFIG[attrs.uiJq]).then(function() {
            callPlugin();
            refresh();
          }).catch(function() {

          });
        } else {
          callPlugin();
          refresh();
        }
      };
    }
  };
}]);

The function to note here is the following:

        function refresh(){
      // If ui-refresh is used, re-fire the the method upon every change
      if (attrs.uiRefresh) {
        scope.$watch(attrs.uiRefresh, function() {
          callPlugin();
        });
      }
    }

Then i have the following html:

  <div ui-jq="plot" ui-refresh="gaps"  ui-options="
  [
    { data: {{gaps}}, label: 'Forventet', points: { show: true, fill:true } },
    { data: {{avg}}, label: 'Gns niveau', points: { show: true, fill:true } }
  ],
  {
    colors: [ '{{app.color.info}}','{{app.color.success}}' ],
    series: { shadowSize: 2, points: {radius: 8, fill: true} },
    xaxis:{ font: { color: '#ccc' } },
    yaxis:{ font: { color: '#ccc' } },
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
    tooltip: true,
    tooltipOpts: { content: '%s of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } }
  }
" style="height:240px"></div>

Note that i am linking the ui-refresh to gap

Then i have the following controller:

    app.controller('CompetenceController', ['$http', '$scope', '$sessionStorage', 'competenceStatService', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, competenceStatService, $log, Session, api) {
    $scope.renderer = 'line';
    $scope.sightingsByDate = [[0, 40], [1, 49], [2, 38], [30, 4], [5, 32]];
    $scope.gaps = [];
    competenceStatService.getGaps().then(function (response) {
        $scope.gaps = response;
    });

    $scope.avg = [];
    competenceStatService.getAvg().then(function (response) {
        $scope.avg = response;
    });

}]);

I know that the gaps variable changes however the watch does not trigger ( meaning it does not call callPlugin()

Can anyone tell me what i might have done wrong?

Answer 1

You might be missing the deep watch:

scope.$watch(attrs.uiRefresh, function() {
    callPlugin();
}, true); //added True for deep watch

Edit : As @Eyal pointed out, the watch works with attrs , so I deleted the first section. However, it doesn't work without the deep watch so that part might still be helpful.

Updated fiddle: http://jsfiddle.net/fu73pz6t/3/