这是角度指令的正确用法吗？答案

【问题标题】：Is this the correct usage of an angular directive?这是角度指令的正确用法吗？
【发布时间】：2015-06-07 18:52:03
【问题描述】：

我对 Angular 非常陌生，并且正在尝试制定一个指令，允许管理员用户修改网页上的内容，如果用户不是管理员，则仅以不可编辑的格式显示内容.我决定将此指令称为“blurb”，并定义如下：

blurb-modules.js：

    ;(function () {
    'use strict';
    angular.module('blurb', ['ngSanitize', 'mdotTamcCouncil.core']);

})();

blurb-directive.js

; (function () {
    'use strict';
    angular.module('blurb')
        .directive('mcgiBlurb', blurb);

    function blurb() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: jsGlobals.componentsFolder + '/blurb/blurb.html',
            controller: function ($scope, blurbsFactory, userFactory) {
                $scope.content = "";
                $scope.blurbs = {};
                $scope.currentUser = {};
                this.editMode = false;


                userFactory().success(function (data) {
                    $scope.currentUser = data;
                });

                blurbsFactory().success(function (data) {
                    $scope.blurbs = data;
                    $scope.content = $scope.blurbs[$scope.textKey];
                });

                this.enterEditMode = function () {
                    this.editMode = true;
                };

                this.saveEdits = function () {
                    this.editMode = false;
                    $scope.blurbs[$scope.textKey] = $scope.content;
                };
            },
            controllerAs: 'blurb',
            scope: {
                textKey: "@"
            }
        };
    };
})();

blurb.html

<div>
    <form name="blurbForm" novalidate>
        <div class="form-group" 
             ng-show="currentUser.isAdmin && blurb.editMode" 
             ng-class="{ 'has-error' : blurbForm.content.$invalid && !blurbForm.content.$pristine, 'has-success' : !blurbForm.content.$invalid && !blurbForm.content.$pristine }">
            <textarea name="content" class="form-control" rows="6" ng-model="content" required="true"></textarea>
            <p ng-show="blurbForm.content.$invalid && !blurbForm.content.$pristine">Content is required.</p>
            <div>
                <button type="button" class="btn btn-primary btn-sm" ng-disabled="blurbForm.$invalid" ng-click="blurb.saveEdits()"><i class="glyphicon glyphicon-ok-sign icon-white"></i> Save Changes</button>
            </div>
        </div>
        <div class="form-group" ng-hide="blurb.editMode">
            <p ng-bind-html="content"></p>
            <div ng-show="currentUser.isAdmin">
            <button type="button" class="btn btn-primary btn-sm" ng-click="blurb.enterEditMode()"><i class="glyphicon glyphicon-pencil icon-white"></i> Edit</button></div>
        </div>
    </form>
</div>

然后我在我的 index.html 上实例化它，如下所示：

<mcgi-blurb text-key="mainPageTest"></mcgi-blurb>

我创建了以下供指令使用的服务，希望最终能够将它们提取到从 WebAPI 检索到的数据中。

blurb-service.js

(function () {
    angular.module('mdotTamcCouncil.core').factory('blurbsFactory', function ($http) {
        var promise = null;

        return function () {
            if (promise) {
                // If we've already asked for this data once,
                // return the promise that already exists.
                return promise;
            } else {
                promise = $http.get(jsGlobals.blurbsDataURL);
                return promise;
            }
        };
    });
})();

用户服务.js

(function () {
    angular.module('mdotTamcCouncil.core').factory('userFactory', function ($http) {
        var promise = null;

        return function () {
            if (promise) {
                // If we've already asked for this data once,
                // return the promise that already exists.
                return promise;
            } else {
                promise = $http.get(jsGlobals.userDataURL);
                return promise;
            }
        };
    });
})();

这一切都有效。这看起来很棒。但我有这种偷偷摸摸的怀疑，我没有按照它们的意思使用指令。我有一堆“逻辑”来控制 html 在 html 模板中的显示方式，这似乎有点“脏”/“hacky”/“我不知道”。

这是实现角度指令的正确方法吗？我应该将其中的一部分放在不同的位置吗？如果有，在哪里？

【问题讨论】：

这似乎是一个人为的例子。如果您的逻辑只是“如果用户是管理员，则允许他们编辑文本”，那么文本可以进入样式化的控件，那么您可以只使用 ngReadonly 指令docs.angularjs.org/api/ng/directive/ngReadonly
如果您使用@jonnyknowsbest 方法，您需要确保在服务器端检查他们是管理员还是用户，因为您可以在网络检查器中删除只读属性并仍然提交

标签： angularjs angularjs-directive

【解决方案1】：

要使字段不可编辑，您可以简单地使用 ng-readonly 指令，如下所示：<INPUT ng-readonly="expression">...</INPUT> 并使用 ng-if 代替 ng-show 使内容可见的用户角色基础，因为如果表达式返回 false，ng-if 不会让 DOM 呈现。

ng-readonly ng-readonly documentation

ng-if ng-if directive documentation

【讨论】：