Question

我想在我的示例角色代码库中用$scope关键字替换this，然后转而使用ControllerAs语法。

但反过来现在似乎没有用。

我的controller以及custom directive中的国家/地区列表，只要点击国家/地区名称，我就会显示respective country的地图。

<body ng-controller="appCtrl as vm">

<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 vm.countries" ng-click="vm.itemClicked(countryTab)" style="cursor:pointer">
                <a>{{countryTab.label}}</a>
            </li>
            <br>
        </ul>
    </div>
</nav>
<data-country-tab-bar country="vm.selectedCountry"  ng-if="vm.selectedCountry">
    <strong><i>Check out our cool new directive!</i></strong>
</data-country-tab-bar>
<script>
    var app = angular.module('app',[]);
    app.controller('appCtrl',function($scope,$http){
        this.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'
        }];

        this.itemClicked = function(value){
            this.selectedCountry = value;
        }


    });

在我的指令中，我只是绑定the country object that is the part of my DDO's isolated scope , to that of the controller's。

        app.directive('countryTabBar',function(){
            return {
                restrict: 'E',
                transclude:true,
                replace:true,
                $scope:{
                    country: '='
                },
                template: '<div>'+
                '   <div><strong>{{country.label }}</strong> : {{ country.coords}}</div>'+
                '   <br/>'+
                '   <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+      
                '   <br/><br/>'+
                '   <div ng-transclude></div>'+
                '</div>',
            }
        });
    </script>
</body>

但是，我可以看到被转换的字符串Check out our cool new directive!，但我看不到地图。

在控制台中没有这样的错误。

请帮忙。

Answer 1

我认为问题与：

有关

this.itemClicked = function(value){
  this.selectedCountry = value;
}

在JavaScript中声明的函数中的this.selectedCountry将引用当前函数，而不是您期望的控制器（父函数）。

解决方案（ES5）：

var vm = this;
this.itemClicked = function(value){
  vm.selectedCountry = value;
}

解决方案（ES6）：

this.itemClicked = value => this.selectedCountry = value;

此外，指令范围语法似乎不正确：

$scope:{
  country: '='
},

应该是：

scope:{
  country: '='
},

希望这有帮助。

通过打开ControllerAs替换$ scope

1 个答案: