How can I use Angular constant in view?
I am trying to remove a large number of string literals from angular directives across all my views. I am starting a constant that I want to make global, for example:
// UI Validation constants.
MyAngularApp.constant('valid', {
"postalCode": {
"pattern": "/^[0-9]+$/",
"minLength": 4
}
});
Then I would like to use this constant in input directives in my view templates, similarly:
<input type="text" ng-pattern="{{valid.postalCode.pattern}}" blah blah>
But here I have serious doubts about the binding in the directive parameter.
I have seen some suggestions for adding such a constant to the root scope, but also some suggestions for avoiding the root scope and only adding to local scopes within controllers, but this is due to a code change on multiple controllers where I would prefer just one change.
If I decide to go with the root scope, how would I add this constant? My faulty attempt:
console.log("Abandon all hope who enter here!");
MyAngularApp.config(function ($rootScope) {
$rootScope.valid = valid; // How to access the constant here?
});
But this code is giving me error:
Unprepared error: [$ injector: modulerr]
ADDED: Some suggestions below include angular feature run
, but I can't find it. The call module
looks like this:
var MyAngularApp = angular.module('MlamAngularApp', ['kendo.directives', 'ngRoute', 'ui.bootstrap', 'ngReallyClickModule', 'ngMessages', 'angular-loading-bar', 'ngAnimate']);
source to share
In the OP - if you want to bind to the rootScope when you load the app, you can use an execution block like this:
app.run(function($rootScope) {
$rootScope.name = 'bound during run'
})
I've updated the plunker demonstrating scope inheritance to show it in action.
It's bad practice to store things in the $ rootScope. Here's an example why:
This can make things confusing and messy, especially if multiple people maintain the code. You bind something to the rootScope and the EVERY control scope has this property attached to it. If you need to do this, you must document it clearly...
Do it like this:
app.constant('myConstant', {
"postalCode": {
"pattern": "/^[0-9]+$/",
"minLength": 4
}
})
Just enter wherever you need it:
app.controller('MainCtrl', function($scope, myConstant) {
$scope.name = myConstant;
});
The banner method is fine too, although I think it's better to do it in a way that maintains a high level of abstraction rather than attaching a bunch of stuff to this module. This way you can hide all your constants in .js constants or whatever and keep everything clean.
source to share
See snippet.
valid
a constant is entered in $rootScope
when called run
.
From the view side, it's just {{$root.valid.postalCode.pattern}}
where you need to enter it.
And so ... the only thing you need to change is the function run
and binding of the respective views.
Typing in config
won't work under Unable to 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>
source to share