通过打开ControllerAs

替换$ scope与此我想替换$scope与this关键字在我的示例Angular代码库中，并转而使用ControllerAs语法切换到。通过打开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>

不过，我可以看到transcluded串Check out our cool new directive!但我不能看地图。

控制台中没有错误。

请帮忙。

来源

2016-12-24 StrugglingCoder

不确定“transcluded string”是什么意思。它看起来像你刚刚看到你放在指令标签内的字符串，但指令不是激活/处理。它只是死HTML。如果是这样，我看到发生这种情况的原因是指令标记错误地使用了指令名称（ab-cd而不是a-b-c-d等），或者指令没有注入到试图使用它的组件中。所以标签在模板中，模板呈现，但指令什么都不做。没有控制台错误告诉你这是发生了什么，它只是一个角度黑洞。 –

'{{country.label}}'是否正在打印该值？ –

@ atulquest93 ..不，它不是。 'img'也不会来。我想这是有道理的，我将'vm.selectedCountry'传递给指令的作用域对象。 – StrugglingCoder

我认为这个问题是关系到：在宣告因此JavaScript将参考目前的功能，而不是控制器（父函数）如你期望的功能

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

this.selectedCountry。

解决方案（ES5）：

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

解决方案（ES6）：

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

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

$scope:{ 
    country: '=' 
},

应该是：

scope:{ 
    country: '=' 
},

希望这会有所帮助。

来源

2016-12-24 17:05:38

感谢您指出错误。但我仍然不能看到''工作。 “{{country.label}}”都不起作用。 – StrugglingCoder

请参阅编辑（我认为另一个问题是$ scope在您的指令定义中应该是scope）。 –

男人！我究竟如何看不到它。再次感谢您的时间和精力。 – StrugglingCoder

通过打开ControllerAs

回答

相关问题