1

現在、マスタープロジェクトに取り組んでいます。私のアプリケーションは、オンライン ポートフォリオ管理です。ユーザーはアプリに登録してプロフィールを作成できます。ここで、プロファイル ビューに [編集] ボタンと [削除] ボタンを付けたいと思います。ただし、プロファイルを作成したユーザーだけがこのボタンを表示できます。たとえば、私がアプリのユーザーである場合、自分のプロファイルの編集ボタンと削除ボタンのみが表示され、他のユーザーのプロファイルのみが表示されます。

私はAngularJSが初めてです。簡単に見えますが、それでもうまくいきませんでした。プロファイルの表示とプロファイルの編集の異なるビューがあります。しかし、私は両方のコントローラーを1つしか持っていません。

これは私のビュープロファイルコードがどのように見えるかです.

HTML

<section data-ng-controller="ProfilesController as profilesCtrl">

    <div class="modal-header">
        <div>
            <h1>{{profile.firstname}} {{profile.lastname}}</h1>
        </div>
        <div class="pull-right">
            <button class="btn-success btn-lg" type="button" data-ng-click="profilesCtrl.modalUpdate('lg', profile)">Edit</button>
            <button class="btn-danger btn-lg" type="button" data-ng-click="profilesCtrl.remove(profile)">
                <i class="glyphicon glyphicon-trash">

                    </i>
            </button>
        </div>
    </div>
</section>

コントローラ

profilesApp.controller('ProfilesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Profiles', '$modal', '$log',
    function($scope, $stateParams, $location, Authentication, Profiles, $modal, $log) {

        this.authentication = Authentication;

        // Find a list of Profiles
        this.profiles = Profiles.query();

        // open a modal window to view single profile
        this.modalview = function(size, selectedProfile) {

            var modalInstance = $modal.open({
                templateUrl: 'modules/profiles/views/view-profile.client.view.html',
                controller: function($scope, $modalInstance, profile) {
                    $scope.profile = profile;

                    console.log(profile);

                    $scope.ok = function() {
                        $modalInstance.close($scope.profile);
                    };
                },
                size: size,
                resolve: {
                    profile: function() {
                        return selectedProfile;
                    }
                }
            });

            modalInstance.result.then(function(selectedItem) {
                $scope.selected = selectedItem;
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

        // open a modal window to update single profile
        this.modalUpdate = function(size, selectedProfile) {

            var modalInstance = $modal.open({
                templateUrl: 'modules/profiles/views/edit-profile.client.view.html',
                controller: function($scope, $modalInstance, profile) {
                    $scope.profile = profile;

                    $scope.ok = function() {
                        $modalInstance.close($scope.profile);
                    };

                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                },
                size: size
            });

            modalInstance.result.then(function(selectedItem) {
                $scope.selected = selectedItem;
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };


        // Remove existing Profile
        this.remove = function(profile) {
            if (profile) {
                profile.$remove();

                for (var i in this.profiles) {
                    if (this.profiles[i] === profile) {
                        this.profiles.splice(i, 1);
                    }
                }
            } else {
                this.profile.$remove(function() {
                    $location.path('modules/profiles/views/list-profiles.client.view.html');
                });
            }
        };

        // Update existing Profile
        this.update = function(updatedProfile) {
            var profile = updatedProfile;

            profile.$update(function() {}, function(errorResponse) {
                $scope.error = errorResponse.data.message;
            });
        };


    }
]);

どうすればこの問題を解決できますか? どんな助けでもいただければ幸いです。

4

2 に答える 2

1

次のようなディレクティブを使用できます。

<button access-level="canEdit">Edit</button>

そしてあなたのディレクティブはaccessLevelにバインドされています:

angular.module("app")
    .directive('accessLevel', ['AuthService', 'AUTH_EVENTS', function (authService, authEvents) {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                var accessLevel;

                attrs.$observe('accessLevel', function (acl) {
                    if (acl) {
                        accessLevel = acl;
                        updateCss();
                    }
                });

                $scope.$on("auth-change", function (event, data) {
                    switch (data) {
                        case authEvents.logoutSuccess:
                        case authEvents.loginSuccess:
                            updateCss();
                            break;
                        case authEvents.notAuthorized:
                        default:

                    }

                });

                function updateCss() {
                    if (accessLevel) {
                        if (!authService.isAuthorized(accessLevel)) {
                            switch (element[0].nodeName) {
                                case "A":
                                    element.hide();
                                    break;
                                default:
                                    element.attr("disabled", "disabled");
                                    break;
                            }
                        } else {
                            switch (element[0].nodeName) {
                                case "A":
                                    element.show();
                                    break;
                                default:
                                    element.removeAttr("disabled");
                                    break;
                            }
                        }
                    }
                }
            }
        }

    }]);

これは必要なものよりも少し多いですが、何が達成できるかがわかります。（そして、認証サービスなどを書く必要があります。）

例として、ここに私の認証サービスの一部があります:

angular.module('app')
    .factory("AuthService", ["$rootScope", "$http", "AuthSession", "AUTH_EVENTS", function ($rootScope, $http, AuthSession, AUTH_EVENTS) {

       AuthSession.load();

       $rootScope.$on('$stateChangeStart', function (event, nextState) {
            if (nextState.data && nextState.data.accessLevel && !service.isAuthorized(nextState.data.accessLevel)) {
                event.preventDefault();
                $rootScope.$broadcast('auth-change', AUTH_EVENTS.loginRequired, nextState.name);
            }
        });

        var service = {
            login: function (credentials) {
                return $http
                            .post('/api/account/login', credentials)
                            .success(function (data, status) {
                                if ((status < 200 || status >= 300) && data.length >= 1) {
                                    $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginFailed);
                                    return;
                                }

                                AuthSession.create(data.AccessToken, data.User);
                                $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginSuccess);
                            }).error(function (data, status) {
                                $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginFailed);
                            });
            },
            logout: function () {
                AuthSession.destroy();
                $rootScope.$broadcast("auth-change", AUTH_EVENTS.logoutSuccess);
            },
            isAuthenticated: function () {
                return (AuthSession.token !== null);
            },
            isAuthorized: function (accessLevel) {
                if (!accessLevel) return true;

                return (this.isAuthenticated() && AuthSession.user.UserRoles.indexOf(accessLevel) !== -1);
            }

        }
        return service;
    }]);

このサービスは、サーバーからベアラー トークンを取得し、authsession サービスに格納します。ユーザーの役割も、他のユーザー情報と一緒に保存されます。バックエンドも保護されているため、クライアントでユーザーの役割を変更した人はバックエンドに書き込むことができません。(クライアント側のすべては、ユーザーのルック アンド フィールのためのものです)

于 2015-02-19T14:37:30.200 に答える
0

ふたつのやり方 ：

  1. プロファイルが作成されたら、ユーザー詳細テーブルの isProfileCreated (作成する必要があります) 列を更新します。角度負荷で、プロファイルが作成されているかどうかを呼び出して確認します。true の場合は、ng-show を使用して (編集および削除ボタン) を表示します。

  2. または、編集する場合は、とにかくテーブルからプロファイルの詳細を取得する必要があります。その場合、プロファイルが作成されていない場合はサーバーが false を送信し、作成されている場合は json オブジェクトを送信します。コントローラーの使用で

    if(angular.isObject(プロファイル)){

            $scope.showeditbutton = true;

        $scope.showdeletebutton = true;

    }

于 2015-02-19T14:35:29.583 に答える