title: Access config constants inside view in angularjs
body: <p>I've configured a constant on a module like below(simplified version of my actual scenario):</p>
  
  <pre><code>var app = angular.module('app', []);
  angular.config('AnalyticsConstant', function(){
    property: {
      click: 'clicked',
      swipe: 'swiped',
      externalLink: 'opened external link'        
    },
    page: {
      message: {
      list: 'Message listing',
      show: 'Message show'
      }
    }
  }
  </code></pre>
  
  <p>Now I based on user action taken (say swipe), I want to trigger an analytics  event. Since swipe/click or recognizing if an element has an external link, is something done on view level, I want to pass a hash to my controller method.</p>
  
  <p>for example:</p>
  
  <pre><code> &lt;ion-list&gt;
    &lt;ion-item ng-repeat="message in messages track by $index" ui-sref="message_path({id: message.id})" class="item-text-wrap"&gt;
      &lt;my-track-directive source='message', property='click'&gt;
    &lt;/ion-item&gt;  
   &lt;/ion-list&gt;
  </code></pre>
  
  <p>Here certainly in myTrackDirective, I can read these two values and check if source/property key is available in AnalyticsConstant. Once found out, I'll also have to check if the value are key another key in AnalyticsConstant.source/property hash. Another pain will be, I'll need to stringify the keys source/property so that I can check in hash, however that's not a problem.</p>
  
  <p>I was wondering if I can access the AnalyticsConstant in view, so that the directive line becomes something like:</p>
  
  <pre><code>    &lt;my-track-directive source='AnalyticsConstant[page][message][list]', userAction='AnalyticsConstant[property][click]'&gt;
  </code></pre>
  
  <p>I could think of three solutions:</p>
  
  <ul>
  <li><em>Add inject it root scope. ie.</em></li>
  </ul>
  
  <p><code>app.run(function($rootScope, AnalyticsConstant){
           $rootScope.analyticsConstant = AnalyticsConstant
       }</code></p>
  
  <p>But this is not a good solution, as if by mistake anyone changes <code>$rootScope.analyticsConstant</code> to something else, whole functionality may get screwed.</p>
  
  <ul>
  <li><em>Inject in each controller and set it at $scope level.</em></li>
  </ul>
  
  <p><code>$scope.analyticsConstant = AnalyticsConstant</code></p>
  
  <p>This will be a lot of duplication. Also, it'll also not ensure if <code>$scope.analyticsConstant</code> won't get corrupted by mistake.(Though disaster will also be scoped and limited :) )</p>
  
  <ul>
  <li><em>Write a function which returns AnalyticsConstant inside 'module.run' or may be inside each controller.</em></li>
  </ul>
  
  <p><code>function getAnalyticsConstant = function(){
         return AnalyticsConstant
      }</code></p>
  
  <p>I particularly liked the third approach. But question remains where to place this (rootScope or controller-scope)?</p>
  
  <h2>My questions are:</h2>
  
  <ol>
  <li>Is there any better way to access configured constant inside view in angular?</li>
  <li>What might be other problems with each of these approach I listed above?</li>
  <li>Is the directive approach is better or should I collect this data in some model and then pass it to analytics event function ?</li>
  </ol>
  
  <p>Thanks</p>