我想替换 $scope与 this我的示例 Angular 代码库中的关键字，然后切换到使用 ControllerAs语法。
但反过来这现在似乎不起作用了。
我的 controller 中有一个国家/地区列表在我的custom directive中每当单击国家/地区名称时，我都会显示 respective country 的 map .
<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;
}
});
在我的指令中，我只是绑定(bind) 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!但我看不到 map 。
控制台中没有这样的错误。
请帮忙。
最佳答案
我认为问题与:
this.itemClicked = function(value){
this.selectedCountry = value;
}
在 JavaScript 中声明的函数中的 this.selectedCountry 将引用当前函数，而不是您期望的 Controller (父函数)。
解决方案(ES5):
var vm = this;
this.itemClicked = function(value){
vm.selectedCountry = value;
}
解决方案(ES6):
this.itemClicked = value => this.selectedCountry = value;
此外，指令范围语法似乎不正确:
$scope:{
country: '='
},
应该是:
scope:{
country: '='
},
希望这有帮助。
关于javascript - 通过打开 ControllerAs 将 $scope 替换为此值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41315038/