AngularJs : Custom ng-hide directive

Kembali bermain dengan AngularJs. Berawal karena adanya project yang membuat user memiliki kemampuan yang dinamis dan disimpan pada session storage. 

Solution 1

Pada awalnya pengecheckan dilakukan di controller masing". Hasilnya cukup merepotkan, karena setiap controller harus melakukan pengecheckan sendiri dan apabila ada perubahan membutuhkan banyak effort untuk melakukan perbaikan. 

Solution 1

Solution 2

Setelah itu saya berpikir untuk melakukan pengecheckan di satu tempat saja agar perubahan pengecheckan hanya dilakukan di satu tempat. Sehingga saya memindahkan tempat pengechekan pada service. Dengan demikian controller memiliki kewajiban untuk memanggil service untuk melakukan pengecheckan dan melemparkan hasilnya ke html.

Solution 2

Solution 3

Cara tersebut sudah terimplementasi di beberapa project hingga suatu sore saya ketika sedang merenung di taman saya mendapat pencerahan. Kenapa tidak dibuat directive saja yang melakukan pengecheckan terhadap value itu?

Akhirnya saya melakukan sedikit custom atau mengadopsi apa yang dilakukan pada directive angular yang cukup terkenal yaitu ng-hide / ng-show dengan melakukan pengecheckan variable yang ada pada session storage. 

Solution 3

Demikian secara teori solusinya. Berikut akan saya tunjukkan bentuk data yang tersimpan pada session storage dan penggunaan directivenya.

Privilege di Session Storage :

$scope.privileges = [
    {"name": "create_user"},
    {"name": "update_user"},
    {"name": "read_user"},
    {"name": "delete_user"}]

Directive

'use strict';angular.module('nostraApp')
     .directive('hasPrivilege', ['$sessionStorage', function ($sessionStorage){
            return {
                restrict: 'A',
                link: function(scope, element, attributes) {
                    scope.$watch(attributes.hasPrivilege, 
                     function(checkPrivilege){
                        var value = false;
                        if($sessionStorage.privileges){
                        var listPriv = $sessionStorage.privileges;
                        var privilege = listPriv.map(function (e) {
                            return e.name;
                        }).indexOf(checkPrivilege);
                        if (privilege != -1) {
                            value =  true;
                          }}
                       element.css('visibility', value ? 'visible' : 'hidden');
                       element.css('display', value ? 'inline' : 'none');
                   });
                }};
        }]);

HTML :

<button type="button" ng-click="addUser()" has-privilege='"create_user"'>
 Tambah User
</button>

Dengan demikian tidak ada lagi tambahan code di controller maupun service untuk melakukan pengecheckan. Tentunya hal ini tidak terikat hanya pada angular1 saja tetapi konsep juga dapat di implementasikan di angular2 ataupun angular 4.
Untuk kali ini sekian saja yang dapat saya bagikan untuk mempermudah pekerjaan kali ini. Semoga dapat berguna. Happy Coding~ :D