通過打開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

回答

相關問題