个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 00:07:42 38 4
gpt4 key购买 nike

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

我知道我需要使用 $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 与 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>

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

关于javascript - 关于数据更改的 AngularJs 刷新指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37864956/

38 4 0
文章推荐： c# - Xamarin.Forms 和 ServiceStack 异常 - 无法绑定(bind)到方法 'CertStoreLookup'
文章推荐： php - MySQL 语句拉取过多行
文章推荐： android - 通过 adb shell/Tasker 关闭第二个 SIM - 使用 Activity/Intent
文章推荐： php - 根据原始SQL结果获取额外数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com