Question

我正在使用注入服务的指令。当数据从服务更改时，我希望指令更新。

我知道我需要使用$watch，但我不确定如何在我的情况下实施它。

我尝试了几种方案，但它们没有用。以下是我的指示。

有人可以告诉我如何添加$watch以便指示在数据更改时更新吗？

app.directive('googleAnalytics', function(configFactory){
  return {
    restrict: 'E',
    replace: true,
    link: function(scope,element,attrs){
      configFactory.getconfigs().then(function(configs) {
        scope.gid = configs[0].ga_id;
        var scriptTag = angular.element(document.createElement("script"));
          scriptTag.text("ga('create', '"+scope.gid+"', 'auto');")
          element.append(scriptTag);
      });
    }
  };
})

Answer 1

将$watch与promises一起使用是非常有问题的。我从来没有正常工作，所以我建议您在服务中使用$broadcast通知听众任何更改。或者，您可以轻松实现自己的，轻量级，类似观察者的行为。

<强>的JavaScript

angular.module('app', [])
  // configFactory
  .factory('configFactory', function($q, $interval) {
    var config = null;
    var callbacks = [];

    // mock changes in configuration
    $interval(function() {
      function getTicks() {
        return (new Date()).getTime();
      }

      config = getTicks();
      angular.forEach(callbacks, function(callback) {
        callback(config);
      });
    }, 1000);

    // factory impl      
    return {
      // get resolved config promise
      getConfig: function() {
        return $q.when(config);
      },
      // register callbacks
      register: function(callback) {
        var index = callbacks.indexOf(callback);
        if (index === -1) {
            callbacks.push(callback);
        }
      },
      // unregister callbacks
      unregister: function(callback) {
        var index = callbacks.indexOf(callback);
        if (index === -1) {
            callbacks.splice(index, 1);
        }
      }
    };
  })

  // directive      
  .directive('directive', function(configFactory){
    return {
      restrict: 'E',
      replace: true,
      template: '<div>{{ config }}</div>',
      link: function(scope) {
        // get initial value
        configFactory.getConfig().then(function(config) {
          scope.config = config;
        });

        // callback fn
        var callback = function(config) {
          scope.config = config;
          console.log(config);
        };

        // register callback            
        configFactory.register(callback);

        // when scope is destroyed, unregister callback
        scope.$on('$destroy', function() {
          configFactory.unregister(callback);
        });
      }
    };
  });

<强>模板

<body> 
  <directive></directive>
</body>

请在此处查看相关的plunker https://plnkr.co/edit/ZVyLPm

关于数据更改的AngularJs refresh指令

1 个答案: