AngularJS: Is it possible to access the html element called function in the ng-hide directive

advertisements

I am new to angularjs. Is it possible to access the html element that called a function in the ng-hide directive? I know that ng-click provides the $event which can be used to access the element. However, $event is not available for ng-hide. Furthermore, passing the 'this' keyword as a parameter only passes $scope and even jquery's $(this) keyword is useless.

<h1 class="slide ng-scope" index="0" ng-hide="!isCurrentIndex()">Welcome</h1>

The isCurrentIndex() function is designed to access the index attribute of the element and compare that to a variable that stores the current index. It returns a boolean.

Please any help is appreciated.

           $templateRequest(scope.slides[i].url).then(function(t){
                var template = angular.element(t);
                template.attr("class", "slide");
                template.attr("index",scope.indicator.toString());
                template.attr("ng-hide","!isCurrentIndex()");
                $("#slide-content").append(template);
                $compile(template)(scope);
                ++scope.indicator;
            });


From personal experience forget about accessing data attributes like you did in jQuery. Try to use the angular way of doing things. A good reference for a good start is this git repo: Angular Styleguide by johnpapa

Back to your question. Is this what you try to achieve?

controller:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.isCurrentIndex = isCurrentIndex;
    $scope.index = 0;
    function isCurrentIndex(index){
       return $scope.index === index;
    }
}

html:

<div ng-controller="MyCtrl">
    <h1 class="slide" ng-hide="!isCurrentIndex(0)">Welcome</h1>
    <h1 class="slide" ng-hide="!isCurrentIndex(1)">to</h1>
    <h1 class="slide" ng-hide="!isCurrentIndex(2)">ng-hide</h1>
</div>