データ変更時のAngularJsリフレッシュ指示

私はサービスを挿入する指令を使用しています。データがサービスから変更されると、私はディレクティブを更新したいと思います。データ変更時のAngularJsリフレッシュ指示

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

出典

2016-06-16 Jason

約束のある$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); 
     }); 
     } 
    }; 
    });

テンプレート

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

は、あなたが行くそこここに関連plunker https://plnkr.co/edit/ZVyLPm

出典

2016-06-16 17:36:06

を見る –

は、私が正しいようにあなたの答えをマークしていますありがとうと私はあなたのすべての助けに感謝します。私の問題をもっと調べると、私の最大の問題は値の更新ではなく、Googleアナリティクスが呼び出されたことです。設定ファイルが変更され、GAのIDが更新されたら、私はGoogleアナリティクスのコードを再初期化する必要があります – Jason

データ変更時のAngularJsリフレッシュ指示

答えて

関連する問題