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

Question

我有一個navbar ，顯示的country names很少，當您單擊它們時，應該會顯示相應的map 。

<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的名稱也應更改以反映當前國家/地區 。

如何實現相同？

請提供必要的說明。

Answer 1

您可以實現所需的如下

您需要先將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>

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

問題描述

1 個解決方案

解決方案1
0 2016-12-18 17:25:33

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

問題描述

1 個解決方案

解決方案1 0 2016-12-18 17:25:33

解決方案1
0 2016-12-18 17:25:33