Javascript 关于数据更改的AngularJs刷新指令_Javascript_Angularjs_Angularjs Directive_Angular Services

Javascript 关于数据更改的AngularJs刷新指令

javascript angularjs

Javascript 关于数据更改的AngularJs刷新指令,javascript,angularjs,angularjs-directive,angular-services,Javascript,Angularjs,Angularjs Directive,Angular Services,我使用的是注入服务的指令。当数据从服务更改时，我希望指令更新我知道我需要使用$watch，但我不确定在我的情况下如何实现它我尝试过几种方案，但都不奏效。以下是我的指示有人能告诉我如何添加$watch以便在数据更改时更新指令吗 app.directive('googleAnalytics', function(configFactory){ return { restrict: 'E', replace: true, link: function(scope,el

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

我知道我需要使用

$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);
      });
    }
  };
})

将

$watch

与承诺一起使用是很有问题的。我从来没有让它正常工作过，所以我建议您在服务中使用

$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);
        });
      }
    };
  });

angular.module（'app'，[]）
//配置工厂
.factory（'configFactory'，函数（$q，$interval）{
var-config=null；
var回调=[]；
//模拟配置中的更改
$interval（函数（）{
函数getTicks（）{
return（新日期（））.getTime（）；
}
config=getTicks（）；
forEach（回调，函数（回调）{
回调（配置）；
});
}, 1000);
//工厂设备
返回{
//得到承诺
getConfig:function（）{
返回$q.when（配置）；
},
//注册回调
寄存器：函数（回调）{
var index=callbacks.indexOf（callback）；
如果（索引==-1）{
callbacks.push（回调）；
}
},
//取消注册回调
取消注册：函数（回调）{
var index=callbacks.indexOf（callback）；
如果（索引==-1）{
回调.拼接（索引，1）；
}
}
};
})
//指示
.directive（'directive'，函数（configFactory）{
返回{
限制：'E'，
替换：正确，
模板：“{config}}”，
链接：功能（范围）{
//获取初始值
configFactory.getConfig（）.then（函数（配置）{
scope.config=config；
});
//回调函数
var callback=函数（配置）{
scope.config=config；
console.log（config）；
};
//寄存器回调
configFactory.register（回调）；
//当作用域被销毁时，取消注册回调
作用域.$on（“$destroy”，函数（）{
取消注册（回调）；
});
}
};
});

模板

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

请参见此处的相关plunker

谢谢，我将您的答案标记为正确，并感谢您的帮助。当我进一步研究我的问题时，我最大的问题似乎不是更新值，而是一旦调用google analytics。当配置文件更改并且GA id更新时，我需要重新初始化google analytics代码