Passing a $rootScope value in a javascript that is placed within a view
Question
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..
2 answers
solution1
1 ACCPTED 2017-01-18 13:52:49
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();
}
]);
solution2
0 2017-01-18 13:25:39
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
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.