how to write a simple ng-show directive in angular js

Question

I'm having trouble with the simple basics of angular directives and I was hoping for the most basic example of how to write an new ng-show directive. ie. I want to write directive ng-show2 to work the same as ng-show.

I get confused because in the angular.js file, the directive is defined like this:

var ngShowDirective = ngDirective(function(scope, element, attr){
  scope.$watch(attr.ngShow, function(value){
    element.css('display', toBoolean(value) ? '' : 'none');
  });
});

but then most of the directive examples I see are written like this:

var myApp = angular.module('myApp', []);
myApp.directive('ngShow2', function() {
    return {
        replace: true,
        restrict: 'A',
        link: function(){....}
});

what exactly is corresponding with what?

jaime · Accepted Answer · 2012-11-01 03:43:29Z

I'm not an expert on AngularJS internals, but what you are seeing[1] is a method angular uses to create directives internally. If you look at the ngDirective's signature you'll notice is the same as the link function used in most examples.

During the built process the function ngShowDirective is added to the ng module. [2], and AFIK is not exposed.

Since what you want is a basic example of how to implement a ng-show directive, all you need to do is create a module for your app, and add the directive to that module, here's a simple example

App.directive('ngShow2', function() {
    return {
        replace: true,
        restrict: 'A',
        link: function(scope, element, attr){
            scope.$watch(attr.ngShow2, function(value){
               element.css('display', value ? '' : 'none');
            });
        }
    };
});

jsfiddle: http://jsfiddle.net/jaimem/L7QEE/

[1] https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L36-40

[2] https://github.com/angular/angular.js/blob/master/src/AngularPublic.js#L89

zcaudate · Accepted Answer · 2012-11-01 03:48:50Z

1

This code works as well

<!doctype html>
<html ng-app="myApp" ng-controller="AppCtrl">
<script src="js/angular.min.js"></script>
<body>
<h1 ng-show2="show" ng-bind="name"></h1>
</body>
</html>

<script>
  var app = angular.module('myApp', []);

  app.controller('AppCtrl', function AppCtrl($scope){
    $scope.name = 'Guest';
    $scope.show = true;
  });

  app.directive('ngShow2', function(){
    return function($scope, $element, $attributes){
      var expr = $attributes.ngShow2;
      $element.css('display', $scope[expr] ? '' : 'none');
    };
  });
</script>

edited Nov 1, 2012 at 3:48

answered Nov 1, 2012 at 3:43

zcaudate

14.3k7 gold badges71 silver badges139 bronze badges

Collectives™ on Stack Overflow

how to write a simple ng-show directive in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related