Question

我一直在寻找，但我可能一直在寻找错误的条款。无论如何，我想要做的是根据用户是否被授权生成不同的元素（只读模式）。

例如，如果用户未授权我想生成带有数据的标签。如果用户被授权，我想生成一个文本框/文本区域等，他们可以编辑。是否有针对此类生成的内置指令，还是需要创建自定义指令？

查看angulars网站，http://docs.angularjs.org/api/ng/directive/ngReadonly 它几乎具有功能，只是我想将文本框切换为标签。

关于安全性的说明，用户不应该能够更改html中的属性来激活控件。

Answer 1

您可以使用ng-if

即。

<div>
    <input type="text" ng-if='user.admin' ng-model="myModel" />
    <span ng-if='!user.admin'>{{ myModel }}</span>
</div>

它需要更多的HTML。如果有其他方式我会喜欢听到它，因为我在我的公司基于角色的订单系统中使用ng-if。

修改

好的，所以我写了一个快速的小指令，仍然需要更多的工作。

HTML（请注意：范围对象没有{{花括号}}：

<auth-input can-edit="admin" obj="input" model="authTest" obj-class="form-control" type="text"> </auth-input>


可编辑 - 管理员（布尔值）来自范围，即$scope.admin=true;使用{{admin}}会引发错误。
   obj - 如果admin = true，则需要对象的类型（目前仅支持input和textarea）。
  模型 - 对要绑定的ng模型的引用。
   obj-class - 类属性，以防你使用bootstrap，foundation等框架。

当前输入元素支持的属性（更需要支持）：

型

ID

指令：

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

然后像其他模块一样注入它：

var app = angular.module('app', ['authInputs']);

随意让它变得更好，我还有很多事情要做，但目前很少。我会尽快花一些时间来更新这个答案和我的小提琴链接。

Demo with binding and toggle

Answer 2

AngularFire Seed使用NG-Show-Auth（位于此处https://github.com/firebase/angularFire-seed/blob/master/app/index.html）来确定元素的可见性，不确定这是否是您正在寻找的。

一旦你决定使用它，你可以使用使用a（我的大脑目前在名字上滑倒）但是自定义的HTML元素I.E.

<name></name>

然后在自定义元素的文本中，它将包含ng-show-auth true和false个案。

<input ng-show-auth=true></input>
<p ng-show-auth=false>{{text}}</p>

这将允许您更轻松地阅读代码（当您查看代码时）并将该特定实现（某种）保留在实际HTML之外。

Angularjs - 生成安全的只读视图或可编辑视图

2 个答案: