Question

在导航栏中，只要我们点击国家/地区名称，相应的地图就会出现在屏幕上。

截至目前，国家坐标已硬编码到我建立的指令中。但是我无法在屏幕上显示指令。

我知道，我遗漏了一些非常基本的东西，但直到现在我都无法理解。

<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很新。

Answer 1

你的指令标签看起来如下所示，期望选定的国家/地区。

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

AngularJS中的自定义指令

1 个答案: