Question

可能问题没有正确表达。但这就是我想要做的事情。

我在国家/地区数组中定义了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;
                }
            }
        }
    });

但点击国家/地区名称时没有任何反应。

现在用户界面搞砸了。

需要做些什么来修复它？请建议。只有在点击名称后才能显示地图，而不是之前。

Answer 1

内部

“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指令隐藏所有country-tab-bar元素，该指令使用new属性，如果其为true，则显示其false为隐藏。

ng-click被分配给li元素，其中包括要点击的按钮和country-tab-bar本身。如果只想在按钮上关闭它，请单击ng-click元素内的<a>指令

Answer 2

您的代码中的一些细微更改正在运行。 请参阅以下评论。

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

        }
    }
});

单击Angular指令中的链接功能可以看到模板

2 个答案: