AngularJs 刷新数据更改指令

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 和 promise 是有问题的。我从来没有让它正常工作，所以我建议你在你的服务中使用 $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>

在此处查看相关插件 https://plnkr.co/edit/ZVyLPm

AngularJs 刷新数据更改指令

AngularJs refresh directive on data change

javascript

angularjs

angularjs-directive

angular-services