在angularjs中查看视图内部的配置常量

I've configured a constant on a module like below(simplified version of my actual scenario):

我在下面的模块上配置了一个常量（我的实际场景的简化版本）：

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'
    }
  }
}

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.

现在我基于用户采取的行动（比如刷卡），我想触发一个分析事件。由于滑动/单击或识别元素是否具有外部链接，是在视图级别完成的，我想将哈希传递给我的控制器方法。

for example:

例如：

 <ion-list>
  <ion-item ng-repeat="message in messages track by $index" ui-sref="message_path({id: message.id})" class="item-text-wrap">
    <my-track-directive source='message', property='click'>
  </ion-item>  
 </ion-list>

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.

肯定在myTrackDirective中，我可以读取这两个值并检查AnalyticsConstant中是否有源/属性键可用。一旦找到，我还必须检查该值是否是AnalyticsConstant.source / property hash中的另一个键。另一个痛苦是，我需要对密钥源/属性进行字符串化，以便我可以检查哈希，但这不是问题。

I was wondering if I can access the AnalyticsConstant in view, so that the directive line becomes something like:

我想知道我是否可以在视图中访问AnalyticsConstant，以便指令行变为：

    <my-track-directive source='AnalyticsConstant[page][message][list]', userAction='AnalyticsConstant[property][click]'>

I could think of three solutions:

我能想到三个解决方案：

Add inject it root scope. ie.
添加注入根范围。即。

app.run(function($rootScope, AnalyticsConstant){ $rootScope.analyticsConstant = AnalyticsConstant }

app.run（function（$ rootScope，AnalyticsConstant）{$ rootScope.analyticsConstant = AnalyticsConstant}

But this is not a good solution, as if by mistake anyone changes $rootScope.analyticsConstant to something else, whole functionality may get screwed.

但这不是一个好的解决方案，好像错误地将$ rootScope.analyticsConstant更改为其他内容，整个功能可能会被搞砸。

Inject in each controller and set it at $scope level.
在每个控制器中注入并将其设置为$ scope级别。

$scope.analyticsConstant = AnalyticsConstant

$ scope.analyticsConstant = AnalyticsConstant

This will be a lot of duplication. Also, it'll also not ensure if $scope.analyticsConstant won't get corrupted by mistake.(Though disaster will also be scoped and limited :) )

这将是很多重复。此外，它也不能确保$ scope.analyticsConstant不会被错误地破坏。（虽然灾难也将受到限制并且有限:)）

Write a function which returns AnalyticsConstant inside 'module.run' or may be inside each controller.
编写一个函数，在“module.run”中返回AnalyticsConstant，或者可以在每个控制器中。

function getAnalyticsConstant = function(){ return AnalyticsConstant }

function getAnalyticsConstant = function（）{return AnalyticsConstant}

I particularly liked the third approach. But question remains where to place this (rootScope or controller-scope)?

我特别喜欢第三种方法。但问题仍然存在于何处（rootScope或控制器范围）？

My questions are:

Is there any better way to access configured constant inside view in angular?
有没有更好的方法来访问角度中配置的常量内部视图？
What might be other problems with each of these approach I listed above?
我在上面列出的这些方法中可能存在哪些其他问题？
Is the directive approach is better or should I collect this data in some model and then pass it to analytics event function ?
指令方法是更好还是我应该在某个模型中收集这些数据，然后将其传递给分析事件函数？

Thanks

谢谢

1 个解决方案

#1

I would use value to define constants:

我会使用value来定义常量：

app.value('AnalyticsConstant', function(){
  property: {
    click: 'clicked',
    swipe: 'swiped',
    externalLink: 'opened external link'        
  },
  page: {
    message: {
    list: 'Message listing',
    show: 'Message show'
    }
  }
}

So in each controller/directive you just nee to create instance, for example:

因此，在每个控制器/指令中，您只需要创建实例，例如：

app.directive('myTrackDirective', ['AnalyticsConstant', function(AnalyticsConstant) {
        return {
            restrict: 'E',
            replace: true,
             scope: {/* ... */},
            templateUrl: 'some.html',

            link: function(scope) {
              scope.AnalyticsConstant = AnalyticsConstant;
            }
        };
    }]);

After you can call AnalyticsConstant from HTML

您可以从HTML调用AnalyticsConstant

As a side note (doesn't refer to question):

作为旁注（不提问题）：

Try to use MixPanel. Works great for Cordova-Ionic-Angular

尝试使用MixPanel。适用于Cordova-Ionic-Angular

#1