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>

国名をクリックしても何も起こりません。また、UIは台無しです。

私が行方不明です基本的なことは何ですか？

同じことを説明してください。私は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私が提案したことを試してみましたか？ –

'scope'オブジェクトの' city'とは何かを説明してください。あなたはリンク関数で正確に何をしようとしていますか？ – StrugglingCoder

申し訳ありません、それはタイプミスです。それは 'country'でなければなりません。それは' country'という属性の指示から取られます。 –

AngularJSのカスタムディレクティブ

答えて

関連する問題