Javascript 在角度指令中单击链接函数时使模板可见_Javascript_Angularjs

Javascript 在角度指令中单击链接函数时使模板可见

javascript angularjs

Javascript 在角度指令中单击链接函数时使模板可见,javascript,angularjs,Javascript,Angularjs,这个问题可能措词不正确。但这就是我要做的我有一个导航栏，由包含国家名称和坐标的countries数组定义 <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href

这个问题可能措词不正确。但这就是我要做的

我有一个

导航栏

，由包含国家名称和坐标的countries数组定义

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

但点击国家名称时什么也不会发生

用户界面现在是一团糟

需要做些什么来修复相同的问题？请建议。地图只应在单击名称后显示，而不应在单击之前显示

内部

“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>'
    }
});




{{countryTab.label}


var-app=angular.module（'app'，[]）；
app.controller（'appCtrl'，函数（$scope）{
$scope.countries=[{
id:1，
标签：“意大利”，
坐标：“41.29246,12.5736108”，
showProperty:false
}, {
id:2，
标签:"日本",，
坐标：“37.4900318136.4664008”，
showProperty:false
}, {
id:3，
标签：“美国”，
坐标：“37.6，-95.665”，
showProperty:false
}, {
id:4，
标签：“印度”，
坐标：“20.5937,78.9629”，
showProperty:false
}];
});
应用程序指令（'countryTabBar'，函数（）{
返回{
限制：'E'，
范围：{
国家：'='
},
模板：“”+
“意大利”+
“
”+
'    '+        
''
}
});

只需使用

ng show

指令隐藏所有国家/地区选项卡栏元素，该指令使用新属性，即如果为true，则显示选项卡；如果为false，则隐藏选项卡

ng单击被分配给

li

元素，该元素包括要单击的按钮和

国家/地区选项卡栏本身。如果只想在按钮上关闭它，请在
元素内单击移动ng-click
指令
“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>'
    }
});




{{countryTab.label}


var-app=angular.module（'app'，[]）；
app.controller（'appCtrl'，函数（$scope）{
$scope.countries=[{
id:1，
标签：“意大利”，
坐标：“41.29246,12.5736108”，
showProperty:false
}, {
id:2，
标签:"日本",，
坐标：“37.4900318136.4664008”，
showProperty:false
}, {
id:3，
标签：“美国”，
坐标：“37.6，-95.665”，
showProperty:false
}, {
id:4，
标签：“印度”，
坐标：“20.5937,78.9629”，
showProperty:false
}];
});
应用程序指令（'countryTabBar'，函数（）{
返回{
限制：'E'，
范围：{
国家：'='
},
模板：“”+
“意大利”+
“
”+
'    '+        
''
}
});

只需使用ng show
指令隐藏所有国家/地区选项卡栏元素，该指令使用新属性，即如果为true，则显示选项卡；如果为false，则隐藏选项卡
ng单击被分配给li
元素，该元素包括要单击的按钮和国家/地区选项卡栏本身。如果只想在按钮上关闭它，请在
元素内单击移动ng-click
指令
对代码进行一些小的更改，它就可以工作了。见下面的评论

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

        }
    }
});

//HTML


{{country.label}


//应用程序
var-app=angular.module（'app'，[]）；
//控制器
app.controller（'appCtrl'，函数（$scope）{
$scope.countries=[{
id:1，
标签：“意大利”，
坐标：“41.29246,12.5736108”
}, {
id:2，
标签:"日本",，
坐标：“37.4900318136.4664008”
}, {
id:3，
标签：“美国”，
坐标：'37.6，-95.665'
}, {
id:4，
标签：“印度”，
坐标：“20.5937,78.9629”
}];
//选择国家/地区的功能（接收取消满对象作为参数）
$scope.itemClicked=函数（选定）{
//设置指令所需的对象
$scope.selectedCountry=selected
}
});
//指示
应用程序指令（'countryTabBar'，函数（）{
返回{
限制：'E'，
范围：{
国家：'='
},
模板：“”+
“
”+
'    '+        
'',
链接：功能（范围、要素、属性）{
}
}
});
您的代码中有一些小的更改，它正在工作。见下面的评论