Modify ng-show within directive template from link

Question

I have a directive element:

return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:   '<ul>' +
                        '<li ng-show="hideItem">Home</li>' +
                        '<li ng-show="hideItem">Products</li>' +
                        '<li ng-show="!hideItem">Cart</li>' +
                        '<li ng-show="hideItem">Contact Us</li>' +
                    '</ul>',  
        link: function(scope, element, attrs) {

            var shouldHide = myService.getData();


            if (shouldHide === true) {
               scope.hideItem = true
            }

        }
    };

The link function performs a call to a service, the result is either true or false.

If true, i want hideItem to be set to true within my ng-show.

---

HTML structure:

<section ng-controller="NavigationController">
    <i class="home"></i>
    <i class="bell"></i>
    <i class="phone"></i>
    <my-directive></my-directive>
    <button>Submit</button>
</section>

Answer 1

DEMO

you can actually just vm.hideItem = myService.getData(); since you want the boolean's value anyway

return {
        restrict: 'E',
        replace: true,
        controllerAs: 'vm',
        transclude: true,
        template:   '<ul>' +
                        '<li ng-show="vm.hideItem">Home</li>' +
                        '<li ng-show="vm.hideItem">Products</li>' +
                        '<li ng-show="!vm.hideItem">Cart</li>' +
                        '<li ng-show="vm.hideItem">Contact Us</li>' +
                    '</ul>',  
        link: function(scope, element, attrs, vm) {

            vm.hideItem = myService.getData();

        },
        controller: function(){

        }
    };

I added controllerAs: 'vm' it's much more manageable by assigning a name to your controller and attach variables to it