2017-08-24 5 views
0

"Administrator"タイプのユーザにのみ使用できるボタンがあります。だから私は、システムにログインしているユーザーの権限のグループを確認し、私は/ hdieボタンを表示するかどうかを判断します。controllerScopeカラム定義内のHIdeボタン

だから、ng-if/ng-show/ng-hideと何も働かなかった...私はモニターとして記録されており、ボタンは利用できない。

マイコード:

app.controller('OrganizationsController',['$rootScope', '$scope', '$modal', 'HelperService', 'AuthService', '$state', '$http', function ($rootScope, $scope, $modal, HelperService, AuthService, $state, $http) { 
     var controllerScope = $scope; 

     controllerScope.organizationsData = {}; 
     controllerScope.organizationsData.ajax = {url:'/api/organizations/', dataSrc:''}; 
     controllerScope.organizationsData.ajax.beforeSend = function (xhr) { 
      xhr.setRequestHeader("Authorization", AuthService.authToken()); 
     } 

     controllerScope.permissionGroup=$rootScope.permissions.group_name; 

     controllerScope.organizationsData.columns = [ 
      {"data":null,"render":function(data) { 
       return '<a href="/#/organization/'+data.id+'">'+data.data.name+'</a>'; 
      }}, 
      {"data":"domain","defaultContent":""}, 
      {"data":null, "orderable":false, "render":function(data){ 
       return '<button class="btn btn-default btn-sm" style="margin-right:5px;" ng-if="controllerScope.permissionGroup.indexOf(\'Administrator\')!==-1" onclick="angular.element(this).scope().openOrganizationPermissionsSettings(\''+data.id+'\')"><i class="fa fa-wrench"></i></button>' 
       +'<button class="btn btn-default btn-sm" style="margin-right:5px; " onclick=\'angular.element(this).scope().openNewOrganizationModal('+JSON.stringify(data)+')\'><i class="fa fa-pencil"></i></button>' 
       +'<button class="btn btn-default btn-sm" onclick="angular.element(this).scope().deleteOrganization(\''+data.id+'\')"><i class="fa fa-trash"></i></button>'; 
      }}]; 


     controllerScope.deleteOrganization = function (organizationId) { 
      HelperService.deleteItem(organizationId, 'organization', '/api/organizations/'); 
     }; 

だから、最も重要な行は、次のとおりです。

私はボタンを作成および管理
<button class="btn btn-default btn-sm" style="margin-right:5px;" 
     data-if="controllerScope.permissionGroup.indexOf(\'Administrator\')!==-1" onclick="angular.element(this).scope().openOrganizationPermissionsSettings(\''+data.id+'\')"> 
    <i class="fa fa-wrench"></i></button>' 

を "モニター" を返し

controllerScope.permissionGroup=$rootScope.permissions.group_nameその可視性。

今、ボタンは常に上記の画像として利用可能です。あなただけ$compileそれにせずにDOM要素を追加することはできませんので、あなたがdata-ng-hideディレクティブを使用

enter image description here

答えて

0

。角度の変更内容についての考えを持っていないし、あなたの新しい作成された側の注意点として


data-ng-hideに耳を傾けていないサイクルをダイジェスト:onclickを使用していない、ng-click


いくつかの基本的な例を使用します。

var el = angular.element(
      '<button class="btn btn-default btn-sm" ng-click="foo()" ng-show="someCondition"></button>' 
      ); 

    el = $compile(el)($scope); 
    var warapper = document.querySelector('#warapper'); 
    angular.element(warapper).append(el); 
+0

ng-ifを使用するだけで十分ですか? $ compileの使い方 –

+0

@AndréBastosはまったくではありません。すべての角度指示はコンパイルする必要があります –

+0

私にとっては、ng-ifを使用するのは簡単でした.. ng-ifでこれを行う方法は?たとえば、..もしng-.clickを使用すると、onclickイベントはポップアップされず、onclickで動作します... –

関連する問題