Question

我想在html中直接使用少量常量，在控制器中几次使用。

例如，这是主app模块：

angular.module('website', [])
.constant('ROUTES', (function () {
    return {
        SIGN_IN: '/sign/in'
  }
})())
.config([..., 'ROUTES', function(..., ROUTES {
    $routeProvider.when(ROUTES.SIGN_IN, {templateUrl: 'pages/sign_in.html', controller:     'SignInController'});
}]);

所以这很清楚，如何使用来自控制器的常量。

但我怎么能这样做：

<html ng-app="website"> 
<body>
<a href="{{ROUTES.SIGN_IN}}">Sign in</a>
</body>
</html>

重点是将所有路线保存在一个地方。那么，我可以这样做，还是我选择了错误的方式？

Answer 1

恕我直言，更好的方法是使用$rootScope 在html中，每个作用域都继承自$ rootScope，因此如果当前作用域中没有变量，则使用$ rootScope中声明的变量。

一种好的（恕我直言）方式是在运行“阶段”初始化它

angular.module('myApp')
  .run(function ($rootScope) {
      $rootScope.ROUTES = ROUTES
   });

Answer 2

与其他答案略有相似，但IMO清洁工：

angular.module('website')
    .constant("ROUTES", {
        SIGN_IN: "/sign/in"
    })
    .run(function ($rootScope, ROUTES) {
        $rootScope.ROUTES = ROUTES;
    });

和

<a href="{{ROUTES.SIGN_IN}}">Sign in</a>

HTH

Answer 3

我也喜欢$ rootScope方法，但我在某些情况下使用过滤器。

作为一个简化示例，假设有一个常量CONFIG定义为具有名为BuildVersion的属性的对象。你可以创建一个像这样的过滤器：

angular.module('myApp')
  .filter('interpolate', ['CONFIG', function (CONFIG) {
      return function (text) {
          return String(text).replace(/\%VERSION\%/mg, CONFIG.BuildVersion);
      };  
  }]);

在HTML中：

<html ng-app="website"> 
    <body>
        <div>{{'%VERSION%' | interpolate}}</div>
    </body>
</html>

或

<html ng-app="website"> 
    <body>
        <div>{{'bla bla bla %VERSION%.' | interpolate}}</div>
    </body>
</html>

Answer 4

我们也可以使用helper，类似于ROR。

https://gist.github.com/merqlove/491023bcdd2145eef169#file-readme-md

我可以直接从AngularJS下的HTML访问模块常量

4 个答案: