將參數傳遞給AngularJS中的自定義指令

我有一個navbar，它顯示幾個country names，當你點擊它們時，相應的map應該顯示出來。將參數傳遞給AngularJS中的自定義指令

<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-clicked="itemClicked(countryTab)" style="cursor:pointer"> 
       <a>{{countryTab.label}}</a></li> 
     </ul> 
    </div> 
</nav>

而現在的array of countries是硬編碼的。

var app = angular.module('app',[]); 
    app.controller('appCtrl',function($scope){ 
     // Countries 
     $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' 
     }]; 
    });

的custom directive應該表現出相應的地圖，現在是這樣的：

<div> 
    <country-tab-bar></country-tab-bar> 
</div>

而且

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

As it is hard coded coordinates , it only shows one map of Italy. But I want to make it to show respective maps passing coordinates .

另外在div名稱應改變以反映目前的情況ntry。

如何實現一樣嗎？

請提供必要的解釋。

來源

2016-12-18 StrugglingCoder

它類似於您的最後一個問題，你沒有看我所提供[這個答案]（http://stackoverflow.com/a/41207875/2435473）（我猜可能會解決你的問題）..你不應該多次無緣無故地問同一個問題.. –

@PankajParkar非常感謝。你能否解釋一下'scope'對象中的'city'以及你想要在鏈接函數中做什麼？ – StrugglingCoder

可以達到理想的像下面

你需要通過國標和國家COORDS從HTML第一個指令。

<country-tab-bar coords="countryTab.coords" country="countryTab.label"></country-tab-bar>

接收指令範圍中的值。

 scope: { 
      coords: '=coords', 
      country: '=country', 
     }

在鏈接部分使用這些作用域成員並更新模板URL。將其附加到元素（這是應用指令的html標記）。並最終編譯它。

var app = angular.module('app',[]); 
 
    app.controller('appCtrl',function($scope){ 
 
     // Countries 
 
     $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($compile){ 
 
     return { 
 
      restrict: ';E', 
 
      scope: { 
 
      coords: '=coords', 
 
      country: '=country', 
 
      }, 
 
      link : function(scope,element){ 
 
       
 
       var template = '<div ng-click="show()">'+scope.country+'</div><img ng-src="https://maps.googleapis.com/maps/api/staticmap?center='+scope.coords+'&zoom=4&size=800x200">'; 
 
       
 
      element.append(template); 
 
       
 
      $compile(element.contents())(scope); 
 
       
 
      } 
 
     } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" 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"> 
 
      <li ng-repeat="countryTab in countries" style="cursor:pointer"> 
 
      
 
      <country-tab-bar coords="countryTab.coords" country="countryTab.label"></country-tab-bar> 
 
      
 
      </li> 
 
      
 
     </ul> 
 
    </div> 
 
</nav> 
 

 
</body>

來源

2016-12-18 17:25:33 Deep

將參數傳遞給AngularJS中的自定義指令

回答

相關問題