Make template visible on click of link function in Angular directive

Question

Probably the question is not phrased correctly . But here is what I am trying to do .

I have a navbar defined with countries array that contains the countries' names and coordinates.

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Welcome to the world of directives!</a>
            </div>
            <ul class="nav navbar-nav">
                <li ng-repeat="countryTab in countries" ng-click="itemClicked(countryTab.label)" style="cursor:pointer">
                    <a>{{countryTab.label}}</a>
                    <country-tab-bar country="selectedCountry"></country-tab-bar>
                </li>
            </ul>
        </div>
    </nav>
    <script>
        var app = angular.module('app',[]);
        app.controller('appCtrl',function($scope){
            $scope.countries = [{
              id: 1,
              label: 'Italy',
              coords: '41.29246,12.5736108'
            }, {
              id: 2,
              label: 'Japan',
              coords: '37.4900318,136.4664008'
            }, {
              id: 3,
              label: 'USA',
              coords: '37.6,-95.665'
            }, {
              id: 4,
              label: 'India',
              coords: '20.5937,78.9629'
            }];
        });
    </script>

Now country-tab-bar is the directive that has the template that shows the name and the map using the coordinates defined in the array.

I tried

    app.directive('countryTabBar',function(){
        return {
            restrict: 'E',
            scope:{
                country: '='
            },
            template: '<div>'+
            '   <div>Italy</div>'+
            '   <br/>'+
            '   <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+        
            '</div>',
            link : function(scope,elem,attrs){
                scope.itemClicked = function(value){
                    scope.selectedCountry = value;
                }
            }
        }
    });

But nothing happens on click of the country names.

UI for now is screwed up.

What needs to be done to fix the same? Please suggest . The map should only appear after clicking a name, not before.

Merlin · Accepted Answer · 2016-12-20 10:29:49Z

1

Some minor changes in your code and it is working. See the comments below.

WORKING FIDDLE

    //HTML
    <div ng-app="app">
      <div ng-controller='appCtrl'>
         <nav class="navbar navbar-default">
              <div class="container-fluid">
                  <div class="navbar-header">
                      <a class="navbar-brand" href="#">Welcome to the world of directives!</a>
                  </div>
                  <ul class="nav navbar-nav">
                      <!-- pass country to itemClicked function defined into controller -->
                      <li ng-repeat="country in countries" ng-click="itemClicked(country)" style="cursor:pointer">
                          <a>{{country.label}}</a>
                      </li>
                      <!-- directive moved outside the ng-repeat -->
                      <country-tab-bar country="selectedCountry"></country-tab-bar>
                  </ul>
              </div>
          </nav>
      <div>
    </div>

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

    //controller
    app.controller('appCtrl',function($scope){
        $scope.countries = [{
          id: 1,
          label: 'Italy',
          coords: '41.29246,12.5736108'
        }, {
          id: 2,
          label: 'Japan',
          coords: '37.4900318,136.4664008'
        }, {
          id: 3,
          label: 'USA',
          coords: '37.6,-95.665'
        }, {
          id: 4,
          label: 'India',
          coords: '20.5937,78.9629'
        }];

        // function to select the country (receive de full object as parameter)
        $scope.itemClicked = function(selected){
            // set the object needed by the directive
            $scope.selectedCountry = selected
        }

    });

    //directive
    app.directive('countryTabBar',function(){
    return {
        restrict: 'E',
        scope:{
            country: '='
        },
        template: '<div>'+
        '   <br/>'+
        '   <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+        
        '</div>',
        link : function(scope,elem,attrs){

        }
    }
});

edited Dec 20, 2016 at 10:29

answered Dec 20, 2016 at 10:17

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StrugglingCoder Over a year ago

..Thanks but I cant really figure out what are the major changes ? Could you please explain a little ? Why was not mine working , and yours is working as expected ?

Merlin Over a year ago

If nothing happened when you clicked on the name is because you defined ´itemClick´ inside the directive but call it outside.

Georgi Antonov · Accepted Answer · 2016-12-20 09:47:04Z

1

Inside

Where is "selectedCountry" defined

I think what you are trying to do is this:

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Welcome to the world of directives!</a>
            </div>
            <ul class="nav navbar-nav">
                <li ng-repeat="countryTab in countries" ng-click="countryTab.showProperty = !countryTab.showProperty" style="cursor:pointer">
                    <a>{{countryTab.label}}</a>
                    <country-tab-bar country="countryTab" ng-show="countryTab.showProperty"></country-tab-bar>
                </li>
            </ul>
        </div>
    </nav>
    <script>
        var app = angular.module('app',[]);
        app.controller('appCtrl',function($scope){
            $scope.countries = [{
              id: 1,
              label: 'Italy',
              coords: '41.29246,12.5736108',
              showProperty: false
            }, {
              id: 2,
              label: 'Japan',
              coords: '37.4900318,136.4664008',
              showProperty: false
            }, {
              id: 3,
              label: 'USA',
              coords: '37.6,-95.665',
              showProperty: false
            }, {
              id: 4,
              label: 'India',
              coords: '20.5937,78.9629',
              showProperty: false
            }];
        });
    </script>


app.directive('countryTabBar',function(){
    return {
        restrict: 'E',
        scope:{
            country: '='
        },
        template: '<div>'+
        '   <div>Italy</div>'+
        '   <br/>'+
        '   <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+        
        '</div>'
    }
});

Simply hide all country-tab-bar elements using ng-show directive which uses new property that if its true the tab is shown if its false its hidden.

the ng-click is assigned to the li element which includes both the button to click and the country-tab-bar itself. If you want to close it only on the button click move the ng-click directive inside the <a> element

answered Dec 20, 2016 at 9:47

Georgi Antonov

1,6611 gold badge23 silver badges45 bronze badges

2 Comments

StrugglingCoder Over a year ago

Where areyou setting showProperty on ng-click ? I am not getting that . Could you lease explain?

Georgi Antonov Over a year ago

ng-click="countryTab.showProperty = !countryTab.showProperty" here the ng-click is just reversing the boolean of the row. What i wrote is that each "row" by row i mean country button + countryBar directive you have property in the model which specifies if the corresponding row should be hidden or not. and you change this property to be the opposite of itself everytime you click. Thats all

Collectives™ on Stack Overflow

Make template visible on click of link function in Angular directive

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related