AngularJs Refresh-Anweisung bei Datenänderung

Ich verwende eine Direktive, die einen Dienst injiziert. Wenn sich die Daten vom Dienst ändern, möchte ich, dass die Richtlinie aktualisiert wird.AngularJs Refresh-Anweisung bei Datenänderung

Ich weiß, ich muss $watch verwenden, aber ich bin mir nicht sicher, wie es in meiner Situation zu implementieren.

Ich habe ein paar Szenarien ausprobiert, aber sie haben nicht funktioniert. Unten ist meine Direktive.

Kann mir bitte jemand zeigen, wie man in der $watch hinzufügen, damit die Richtlinie aktualisiert, wenn sich die Daten ändern?

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

Quelle

2016-06-16 Jason

Die Verwendung von $watch mit Versprechen ist ziemlich problematisch. Ich habe es nie richtig funktioniert, also würde ich vorschlagen, dass Sie in Ihrem Service benutzen, um Hörer auf irgendwelche Änderungen zu benachrichtigen. Oder Sie könnten leicht Ihr eigenes, leichtgewichtiges, beobachterähnliches Verhalten implementieren.

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

Vorlage

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

Zusammenhang Plunker Siehe hier https://plnkr.co/edit/ZVyLPm

Quelle

2016-06-16 17:36:06

dort gehen Sie ... –

Danke Ich Markierung Ihre Antwort als die richtige und Ich schätze all deine Hilfe. Wenn ich mir mein Problem anschaue, scheint es, dass mein größtes Problem darin besteht, den Wert nicht zu aktualisieren, sondern erst, wenn Google Analytics aufgerufen wird. Wenn sich die Konfigurationsdatei ändert und die GA-ID aktualisiert wird, muss der Google Analytics-Code erneut initialisiert werden – Jason

AngularJs Refresh-Anweisung bei Datenänderung

Antwort

Verwandte Themen