Сделать шаблон видимым при нажатии функции ссылки в Угловой директиве

Возможно, вопрос не сформулирован правильно. Но вот что я пытаюсь сделать.Сделать шаблон видимым при нажатии функции ссылки в Угловой директиве

У меня есть navbar, определенный с помощью массива стран, который содержит названия и координаты стран.

<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>

Теперь country-tab-bar это директива, которая имеет шаблон, который показывает имя и карту, используя координаты, определенные в массиве.

Я попытался

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

Но ничего не происходит по щелчку названий стран.

UI на данный момент завинчен.

Что нужно сделать, чтобы исправить то же самое? Пожалуйста, предложите. Карта должна появляться только после нажатия имени, а не раньше.

источник

2016-12-20 StrugglingCoder

Некоторые незначительные изменения в вашем коде и его работа. См. Комментарии ниже.

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){ 

     } 
    } 
});

источник

2016-12-20 10:17:57 Merlin

.. Спасибо, но я не могу понять, каковы основные изменения? Не могли бы вы немного объяснить? Почему моя работа не работает, а ваша работает как ожидалось? – StrugglingCoder

Если ничего не произошло, когда вы нажали на имя, это потому, что вы определили'itemClick 'внутри директивы, но вызываете ее снаружи. – Merlin

Внутри

Где «SELECTEDCOUNTRY» определяется

Я думаю, что вы пытаетесь сделать, это:

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

Просто скрыть все страны закладок штриховых элементов, используя ng-show директиву, которая использует новое свойство, которое, если его истина, отображается на вкладке, если ее ложь скрыта.

ng-click назначается элементу li, который включает в себя как кнопку для клика, так и сам country-tab-bar. Если вы хотите закрыть его только нажатием кнопки, переместите указатель ng-click внутри элемента <a>

источник

2016-12-20 09:47:04

Где areyou установка 'showProperty' на нг клик? Я этого не понимаю. Не могли бы вы объяснить, объясните? – StrugglingCoder

'ng-click =" countryTab.showProperty =! CountryTab.showProperty "здесь ng-click просто реверсирует логическое значение строки. То, что я написал, состоит в том, что каждая строка «строка» по строке i означает директиву «country button» + 'countryBar', у вас есть свойство в модели, которое указывает, должна ли прямая строка быть скрытой или нет. и вы изменяете это свойство, чтобы быть противоположным самому себе каждый раз, когда вы нажимаете. Thats all –

Сделать шаблон видимым при нажатии функции ссылки в Угловой директиве

ответ

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