CODEWITHSUNDEEP
javascriptangularjs
Nice-Guy
Nice-Guy

Reputation: 1524

Angular analytics view variable

I have been having trouble tracking some more subtle changes in the UI of apps.

Where should a "state" variable go that can be accessed in the DOM? I've looked at using Angulartics but it's too heavyweight for what I need, which is just one JS object for tracking state.

for example: 

var myApp = angular.module("myApp", [ 'ui.router','ct.ui.router.extras.dsr']); 
app.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise("/"); 
        $stateProvider
    .state('main',
    url:"/main",
             deepStateRedirect: true,
    views : {
        pane: {
            templateUrl : 'tpl.pane-0.html'
            },
        }
    )
.state('files',
    url: '/files',
             deepStateRedirect: true,
    views : {
        pane : {
            templateUrl : 'tpl.pane-1.html'
            },
        'first@files' : {
            templateUrl : 'tpl1.first.html',
                          deepStateRedirect: true
            },
        'second@files' : {
            templateUrl : 'tpl1.second.html',
                          deepStateRedirect: true
            },  
        },
    )
  });

Please advise.

Upvotes: 0

Views: 47

Answers (1)

toskv
toskv

Reputation: 31612

You could have it passed as a route paramater.

The example from ui.router doc.

$stateProvider
  .state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function($stateParams) {
      // If we got here from a url of /contacts/42
      expect($stateParams).toBe({
        contactId: "42"
      });
    }
  })

The full doc page: https://github.com/angular-ui/ui-router/wiki/URL-Routing

If you want to share the value with other controllers you can store it in a value like this.

angular.module('myApp').value('contactId', '');

$stateProvider
  .state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function($stateParams, contactId) {
      // If we got here from a url of /contacts/42
      contactId = $stateParams.contactId;

    }
  })

Later other controllers can import contactId as an injectable reference and use it.

Upvotes: 1

Related Questions