Angularjs - Generate a secure read only view or editable view [closed] - angularjs

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I've been searching but i might have been looking for the wrong terms.
Anyway, what i want to do is generate different elements based on if the user is authorized or not (read-only mode).
For example, if the user is not authorize i want to generate a label with the data. If instead the user is authorized i want to generate a textbox / textarea etc.. that they can edit. Are there any built in directives for this type of generation or do i need to create a custom directive?
Looking at angulars site, http://docs.angularjs.org/api/ng/directive/ngReadonly
It almost has the functionality except that i want to switch the textbox to a label instead.
A note on security, the users should not be able to change an attribute in the html to activate the control.

Answer 1

You could use ng-if
i.e.
<div>
<input type="text" ng-if='user.admin' ng-model="myModel" />
<span ng-if='!user.admin'>{{ myModel }}</span>
</div>
It requires a bit more html. If there is another way I would love to hear about it because I use ng-if in my companies role-based order system I wrote.
Edit
Okay, so I wrote a quick little Directive that still needs some more work.
The HTML (Please note: there are no {{ curly braces }} for scope objects):
<auth-input can-edit="admin" obj="input" model="authTest" obj-class="form-control" type="text">
</auth-input>
can-edit - admin (boolean) is coming from the scope, i.e. $scope.admin=true; Using {{ admin }} will throw an error.
obj - The type of object you want if admin = true (currently only supports input and textarea).
model - reference to the ng-model you want to bind to.
obj-class - The class attribute, in case you are using a framework like bootstrap, foundation, etc.
Current Input element supported attributes (more need to be supported):
type
id
Directive:
angular.module('authInputs', []).directive('authInput', function ($compile) {
var inputTemplate = '';
var textTemplate = '';
var textareaTemplate = '';
var getTemplate = function (objType, editable) {
var template = '';
switch (objType) {
case 'input':
template = (editable) ? inputTemplate : textTemplate;
break;
case 'textarea':
template = (editable) ? textareaTemplate : textTemplate;
break;
}
return template;
};
var setupTemplates = function (attrs) {
// Need to build in more flexibility for other input tags, and make this part better.
// Will eventually have an array of accepted attribute names and if attrs contains a matching key
// then inject it by building the input element in the for (var k in attrs) loop.
// Also need to do the same for other element types.
inputTemplate = (attrs.id) ? '<input type="' + attrs.type + '" id="' + attrs.id + '" ng-model="model" class="' + attrs.objClass + '" />' : '<input type="' + attrs.type + '" ng-model="model" class="' + attrs.objClass + '" />';
textareaTemplate = (attrs.id) ? '<textarea ng-model="model" id="' + attrs.id + '" class="' + attrs.objClass + '">{{ model }}</textarea>' : '<textarea ng-model="model" class="' + attrs.objClass + '">{{ model }}</textarea>';
textTemplate = '{{ model }}';
};
return {
restrict: "E",
replace: true,
link: function (scope, element, attrs) {
setupTemplates(attrs);
scope.$watch('watch', function () {
element.html(getTemplate(attrs.obj, Boolean(scope.$parent[attrs.canEdit])));
$compile(element.contents())(scope);
});
},
scope: {
model: '=model',
watch: '=canEdit'
}
};
});
Then just inject it as you would other modules:
var app = angular.module('app', ['authInputs']);
Feel free to make it better, I have a lot more to do with it but little time at the moment. I will try to spend some time on it soon and update this answer and my fiddle link.
Demo with binding and toggle

Answer 2

The AngularFire Seed uses NG-Show-Auth (located here: https://github.com/firebase/angularFire-seed/blob/master/app/index.html) to determine visibility of elementes, not sure if this is what you're looking for.
Once you decide to use that you could maybe use a (my brain is slipping on the name at the moment) but a custom HTML element I.E.
<name></name>
and then in the text for the custom element, it will contain both the ng-show-auth true and false cases.
<input ng-show-auth=true></input>
<p ng-show-auth=false>{{text}}</p>
This will allow you to read the code a little easier (when you're reviewing it) and keep that particular implementation (sort of) out of the actual HTML.