Передача значения $rootScope в JavaScript, который помещается в представление

Итак, как говорится в заголовке вопроса, у меня есть объект в моем $rootScope (назовем его $rootScope.appConfiguration), который принимает значение в.run моего модуля:

angular.module('myapp',[...])
.provider('appConfigurationProvider',function(){...})
.constant(...)
.run(function($rootScope) {
$rootScope.appConfiguration = appConfiguration;
});

(... части - просто пропущенный код, чтобы сделать вещи более читабельными)

Тогда мой в моем index.html я реализую angulartics-piwik:

<body ng-app>

<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
//_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
    var u = appConfiguration.PiwikUrl;
    _paq.push(['setTrackerUrl', u + 'piwik.php']);
    _paq.push(['setSiteId', appConfiguration.PiwikSiteId]);
    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.type = 'text/javascript';
    g.async = true;
    g.defer = true;
    g.src = u + 'piwik.js';
    s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Piwik Code -->
...

Как вы можете видеть, я хочу использовать 2 значения из моего объекта appConfiguration, PiwikUrl и PiwikSiteId, но я понятия не имею, как "передать" объект в javascript. Очевидно, так как код сейчас, я получаю сообщение об ошибке "appConfiguration is notfined"..

2 ответа

Решение

Я бы предложил другой подход, используя сервис и константу конфигурации (вы можете объединить их в провайдере):

Постоянное определение:

angular.module('myApp')
  .constant('AppConfiguration', { ... });

Сервис:

angular.module('myApp')
  .factory('PiwikService', ['$window', 'AppConfiguration',
    function($window, AppConfiguration) {
      return {
        init: function() {
          $window._paq = $window._paq || [];

          var _paq = $window._paq;
          _paq.push(['enableLinkTracking']);

          var u = AppConfiguration.PiwikUrl;

          _paq.push(['setTrackerUrl', u + 'piwik.php']);
          _paq.push(['setSiteId', AppConfiguration.PiwikSiteId]);

          var g = angular.element('<script>')[0], 
              s = angular.element(document).find('script')[0];

          g.type = 'text/javascript';
          g.async = true;
          g.defer = true;
          g.src = u + 'piwik.js';
          s.parentNode.insertBefore(g, s); 
        }
      };
    }
  ]);

Затем вы можете использовать этот новый сервис для инициализации Piwik в блоке выполнения.

angular.module('myApp',[...])
  .run(['PiwikService',
    function(PiwikService) {
      PiwikService.init();
    }
  ]);

Вставьте вашу переменную в window глобальный объект. как ниже, а затем получить доступ к нему, как window.objectname в вашем скрипте конфигурации piwik.

Добавьте этот код, чтобы добавить appConfiguration в окно объекта.

window.appConfiguration = $rootScope.appConfiguration ; 

тогда в вашей конфигурации Piwik вы можете получить к нему доступ, как

var _paq = _paq || [];
//_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
    var u = window.appConfiguration.PiwikUrl;
    _paq.push(['setTrackerUrl', u + 'piwik.php']);
    _paq.push(['setSiteId', window.appConfiguration.PiwikSiteId]);
    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.type = 'text/javascript';
    g.async = true;
    g.defer = true;
    g.src = u + 'piwik.js';
    s.parentNode.insertBefore(g, s);
})();

Обновить:

angular.element(document).ready(function () {
    // put your piwik code here
});
Другие вопросы по тегам