Question

我试图从我的视图中的angular指令中删除大量的字符串文字值。我有一个常数的开头我想做全球化，例如：

// UI Validation constants.
MyAngularApp.constant('valid', {
    "postalCode": {
        "pattern": "/^[0-9]+$/",
        "minLength": 4
    }
});

然后我想在视图模板中的输入指令中使用此常量，方式类似于：

<input type="text" ng-pattern="{{valid.postalCode.pattern}}" blah blah>

但在这里，我对指令参数内的绑定存在严重怀疑。

我已经看到一些建议将这样的常量添加到根作用域，但也有一些建议可以避免根作用域，只是将其添加到控制器内的本地作用域，但这会涉及到几个控制器的代码更改，我更喜欢只有一个变化。

如果我决定使用root范围，我将如何添加此常量？我误入歧途的尝试是：

console.log("Abandon all hope who enter here!");
MyAngularApp.config(function ($rootScope) {
    $rootScope.valid = valid; // How to access the constant here?
});

但是这段代码给了我错误：

未捕捉错误：[$ injector：modulerr]

ADDED：以下一些建议涉及Angular run功能，但我找不到。 module电话是这样的：

var MyAngularApp = angular.module('MlamAngularApp', ['kendo.directives', 'ngRoute', 'ui.bootstrap', 'ngReallyClickModule', 'ngMessages', 'angular-loading-bar', 'ngAnimate']);

Answer 1

根据OP - 如果你想在应用程序加载时绑定到rootScope，你可以使用这样的运行块：

app.run(function($rootScope) {
  $rootScope.name = 'bound during run'
})

我更新了plunker演示范围继承以显示它的实际效果。

Plunker

将内容存储在$ rootScope中是不好的做法。以下是一个例子：

$scope inheritance

它可能会使事情变得混乱和混乱，特别是如果多人维护代码。您将某些内容绑定到rootScope，并且每个控制器的范围都将该属性附加到其范围。如果你必须这样做，你应该记录非常清楚。

这样做：

app.constant('myConstant', {
    "postalCode": {
        "pattern": "/^[0-9]+$/",
        "minLength": 4
    }

})

只需在任何需要的地方注射：

app.controller('MainCtrl', function($scope, myConstant) {
  $scope.name = myConstant;
});

Banner的方法也很好，不过我认为最好这样做以保持高水平的抽象，而不是像这样将一堆东西附加到模块上。这样你就可以将所有常量塞进constants.js或其他任何东西中，并保持一切清洁。

Answer 2

请参阅代码段。在调用valid时，$rootScope常量会被注入run。

在视图方面，只需执行注射所需的{{$root.valid.postalCode.pattern}}。

因此......你唯一需要改变的是run函数和相应的视图的绑定。

注入config将无法按Cannot get to $rootScope

运行

(function() {
  'use strict';
  
  angular.module('myApp', []);
  
  angular.module('myApp')
    .constant('valid', {
      "postalCode": {
        "pattern": "/^[0-9]+$/",
        "minLength": 4
      }
    });
  
  angular.module('myApp')
    .run(runFn);
  
  runFn.$inject = ['$rootScope', 'valid'];
  function runFn($rootScope, valid) {
    $rootScope.valid = valid;
  }
  
  angular.module('myApp')
    .controller('myCtrl', myCtrl);
  
  function myCtrl() {
    var self = this;
  }
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl as vm">
  {{$root.valid.postalCode.pattern}} 
</div>

如何在视图中使用角度常量？

2 个答案: