AngularJS指令或jQuery顯示/隱藏應用程序上的多個項目？

table view AngularJS指令或jQuery顯示/隱藏應用程序上的多個項目？

在這個應用程序中有一列上有'EDIT'或'DELETE'的相應按鈕。在一些視圖中，有6或7個這些列的實例。我知道AngularJS，我不應該考慮如何操作jQuery。但是，在這個需要根據用戶角色顯示/隱藏大量項目的實例中，爲特定項目使用指令或一行或兩行jQuery來addClass（）會更有效率嗎？

使用AngularJS，我需要編寫指令，然後將其應用於項目的HTML和jQuery我會在後端JS上編寫一兩行，並添加一些ID或灑在類中這些項目。

來源

2014-05-11 Brad Martin

如果您嘗試基於用戶角色保護列，您應該將您的html移至服務器技術並隱藏/顯示服務器端。如果你必須做到客戶端，那麼我會根據auth信息在頭部和行'td'上使用'ng-if'。您可以在指令的鏈接函數中使用JQuery。 –

所有請求都基於角色並在服務器上進行身份驗證。這可能不是最優雅的解決方案，就是我所知道的，對我來說似乎很安全。我只是想將它隱藏在客戶端，它是一個內部應用程序，因爲如果用戶確實破解了前端，那麼一旦到達服務器，請求就會因爲身份驗證而失敗。感謝提醒ng-if，我一直忘記那個指令（仍然學習AngularJS）。 –

我有同樣的要求，並尋求指導性解決方案。這適用於我，完全可重用且靈活。如果這有助於你或他人（這是受到我在網上閱讀的一些文章的啓發，無法再回想起來......給他們的作者道歉）。另外，因爲我的應用程序是用angularJS編寫的，並且它更乾淨，因爲它不會混合使用AngularJS和JQuery代碼。

該指令被稱爲擁有許可權及使用方法如下：

<i class="btn btn-default btn-sm" ng-click="clickAction()" has-permission="Edit"><span class="glyphicon glyphicon-edit" title="Edit"></span></i>

該指令代碼本身是很簡單：

myDirectives.directive('hasPermission', ['permissionsService', function (permissionsService, permissions) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var value = attrs.hasPermission.trim(); 
      var notPermissionFlag = value[0] === '!'; 
      if (notPermissionFlag) { 
       value = value.slice(1).trim(); 
      } 

      function toggleVisibilityBasedOnPermission() { 
       var hasPermission = permissionsService.hasPermission(value); 

       if (hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag) 
        element.show(); 
       else 
        element.hide(); 
      } 
      toggleVisibilityBasedOnPermission(); 
      scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission); 
     } 
    }; 
}]);

的permissionsService是保存在當前用戶權限的服務。這是在登錄過程中設置的。正如Ben Felda所提到的，你在客戶端做的任何事情都只是爲了改善用戶體驗。與按鈕相關的操作/資源也必須在服務器端進行檢查以獲得許可。 PS：我不確定JQuery解決方案是否具有任何性能優勢/劣勢，但這對我來說就像是一種魅力。

來源

2014-05-11 16:15:38

我喜歡這個解決方案，感謝代碼片段！我必須爲我的情況調整一下，但這符合我所尋找的內容。 –

AngularJS指令或jQuery顯示/隱藏應用程序上的多個項目？

回答

相關問題