AngularJS를 사용하여 역할에 동적 메뉴 기반을 만드는 방법

Question

AngularJS를 처음 사용했습니다.

template.js

$templateCache.put('template/sidebar-left.html', 
     "<div class=\"sidebar-inner c-overflow\"><div class=\"profile-menu\"><a href=\"\" toggle-submenu><div class=\"profile-pic\"><img src=\"img/profile-pics/1.jpg\" alt=\"\"></div><div class=\"profile-info\">Malinda Hollaway <i class=\"zmdi zmdi-caret-down\"></i></div></a><ul class=\"main-menu\"><li><a data-ui-sref=\"pages.profile.profile-about\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-account\"></i> View Profile</a></li><li><a href=\"\"><i class=\"zmdi zmdi-input-antenna\"></i> Privacy Settings</a></li><li><a href=\"\"><i class=\"zmdi zmdi-settings\"></i> Settings</a></li><li><a href=\"\"><i class=\"zmdi zmdi-time-restore\"></i> Logout</a></li></ul></div><ul class=\"main-menu\"><li data-ui-sref-active=\"active\"><a data-ui-sref=\"home\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-home\"></i> Dashboard</a></li><li data-ui-sref-active=\"active\"><a data-ui-sref=\"timeline\" data-ng-click=\"mactrl.sidebarStat($event)\"><i class=\"zmdi zmdi-layers\"></i>Timeline</a></li>..."); 

controller.js

다음

this.loginF = function(user) { 

    $http.post("data/login.php", user).then(function(userData) { 

     $rootScope.login = userData.data 
     if($rootScope.login == "failed") { 
      alert(JSON.stringify($rootScope.login)) 
     } else { 
      window.location.assign("home.html"); 
     } 
    }) 
} 

사이드 바 내 template.js 코드입니다. 사용자 역할에 따라이 메뉴 항목을 설정해야합니다. 이 항목을 동적으로 만드는 방법을 모르겠습니다. $ rootScope에 사용자 역할이 할당되었습니다. template.js에서 어떻게 사용할 수 있습니까?

Answer 1

음, 템플릿을 analizing 후, 그것은 어떤 다단계 요소가없는 것 같다, 그래서 첫 번째 근사 당신은 두 가지 옵션이 있습니다

다음

var profMenu = [ 
    {title: 'View profile', icon :'zmdi zmdi-account', link:'pages.profile.profile-about', roles: ['role1','role2']}, 
    {title: 'Privacy Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']}, 
    {title: 'Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']}, 
    {title: 'Logout', icon :'zmdi zmdi-time-restore', link:'', roles: ['role1','role2']} 
] 

처럼 배열로 템플릿을 변환됩니다

1. NG-경우/NG-반복 지침과 도면 관리 메뉴

2. 사용자 지정 지침을 작성하고 모든 사용자 변화, 그것은 메뉴 편곡에 보내 님 (들) 그리고 onits를 따라 메뉴 항목 중 하나를 그리는 roles.attribute

내가 어떻게 제공되는 데이터를 앱에 통합하는 방법에 대한 더 나은 무엇을 알고도하지 않습니다 맞아야 maych.

내 유일한 조언은 보안 요구 사항은 "편집증"근처에있는 경우는 완전히 그릴 다음 CSS/DOM 조작

을 통해 원치 않는 항목을 숨기기 위해 보안 관점에서 큰 NO-NO 점이다 수준이라면 앞서 언급 한 배열을 작성하지 않아도됩니다. 그 대신 현재 사용자가 액세스 할 수있는 항목 만있는 배열을 반환하도록 서버에 요청해야합니다.

완전한 예제를 제공하지 못해 죄송합니다. 도움이되기를 바랍니다.