Passing a $rootScope value in a javascript that is placed within a view

Question

Passing a $rootScope value in a javascript that is placed within a view

611 Views Asked by jimmious At 28 April 2025 at 11:55

So as the question title says, I have an object in my $rootScope (let's call it $rootScope.appConfiguration), which takes a value in the .run of my module:

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

(The ... parts are just skipped code, to make things more readable)

Then my in my index.html I am implementing 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 -->
...

As you can see I want to use 2 values from my appConfiguration object, PiwikUrl and PiwikSiteId but I have no idea how to "pass" the object in the javascript. Obviously as the code is now I'm getting an "appConfiguration is not defined" error message..

Original Q&A

There are 2 best solutions below

shyammakwana.me On 18 January 2017 at 13:25

push your variable in window global object. like below and then access it like window.objectname in your piwik configuration script.

Add this code to add appConfiguration into window object.

window.appConfiguration = $rootScope.appConfiguration ;

then in your piwik configuration you can access it like

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

Update:

angular.element(document).ready(function () {
    // put your piwik code here
});

**petkov.np** · Accepted Answer

I'd suggest a different approach, using a service and a configuration constant (you can combine them in a provider):

The constant definition:

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

The service:

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

You can then use this new service to initialize Piwik in a run block.

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

Passing a $rootScope value in a javascript that is placed within a view

There are 2 best solutions below

Update:

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARTICS

Trending Questions

Popular # Hahtags

Popular Questions