2

Я использую директиву, которая вводит услугу. Когда данные меняются из службы, я бы хотел, чтобы директива обновлялась.AngularJs refresh директива по изменению данных

Я знаю, что мне нужно использовать $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); 
     }); 
    } 
    }; 
}) 

ответ

1

Использование $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

+0

там вы идете ... –

+0

Спасибо Я испачкать ответ как правильный и Я ценю вашу помощь. Поскольку я смотрю на мою проблему больше, кажется, что моя самая большая проблема заключается не в обновлении значения, а при вызове google analytics. Когда файл конфигурации изменяется и обновляется идентификатор GA, мне нужно повторно инициализировать код Google Analytics – Jason

Смежные вопросы