Question

我对角度非常新，我正在尝试制定一个指令，允许管理员用户修改网页上的内容，如果用户不是管理员，只需以不可编辑的格式显示内容。我决定将此指令称为＃34; blurb＆＃34;，我已将其定义如下：

导语-modules.js：

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

})();

导语-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检索的数据中。

导语-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;
            }
        };
    });
})();

用户service.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;
            }
        };
    });
})();

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

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

Answer 1

要使字段无法使用，您只需使用 ng-readonly 指令，如下所示：<INPUT ng-readonly="expression">...</INPUT> 并使用 ng-if 代替 ng-show 以使内容可见用户角色基础，如果表达式返回false，则不应让DOM呈现。< / p>

ng-readonly ng-readonly documentation

ng-if ng-if directive documentation

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

1 个答案: