Пользовательские директивы в AngularJS

В навигационной панели всякий раз, когда мы нажимаем на название страны, на экране должна отображаться соответствующая карта.Пользовательские директивы в AngularJS

На данный момент координаты страны жестко закодированы в директиве, которую я построил. Но я не могу сделать директиву, отображаемую на экране.

Я знаю, что мне не хватает чего-то очень простого, но я не мог понять это до сих пор.

<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' 
      }]; 
     }); 

     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; 
        } 
       } 
      } 
     }); 
    </script> 
</body>

Ничего не происходит, когда я нажимаю на названия стран. Также пользовательский интерфейс прикручен.

Какова основная вещь, что мне не хватает?

Пожалуйста, объясните это же. Я довольно много нового для Angular.

источник

2016-12-18 StrugglingCoder

Ваша функция itemClicked ничего не делает, глядя на код, кажется, вы хотите, чтобы он ничего не делал? Вы пытаетесь что-то сделать на родительском контроллере, когда нажата директива? –

@MohammadSepahvand .., чтобы показать директиву, и директива показывает координаты и изображение Google Италии на данный момент. – StrugglingCoder

Тег директивы будет выглядеть примерно так, как показано ниже, в котором ожидается выбранная страна.

<div ng-if="selectedCountry"> 
    <country-tab-bar country="selectedCountry"></country-tab-bar> 
<div>

затем itemClicked внутри контроллера, который будет иметь selectedCountry

scope.itemClicked = function(value){ 
    $scope.selectedCountry = value; 
}

Директива

app.directive('countryTabBar',function(){ 
    return { 
     restrict: ';E', 
     templateUrl: 'countryDirective.tpl.html', 
     scope : { 
      country: '=' 
     } 
    } 
});

countryDirective.tpl.html

<div> 
    <div>{{country.label}}</div> 
    <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200">   
</div>

источник

2016-12-18 11:26:44

@ StrugglingCoder вы пробовали, что я предложил? –

Не могли бы вы объяснить, что такое 'city' в объекте' scope' и что именно вы пытаетесь сделать в функции ссылки? – StrugglingCoder

Извинения, это была опечатка, это должно быть 'страна', и это было бы взято из атрибута' country' директивы –

Пользовательские директивы в AngularJS

ответ

Смежные вопросы