Ng-click et ng-change ne sont pas déclenchés lors de l'utilisation du composant et du gabarit de gabarit 1.6

Question

J'essaie de déclencher une fonction quand quelque chose est tapé dans l'entrée. Pour une raison quelconque, cela ne fonctionne pas lorsque j'utilise un modèle et un composant. Quelqu'un peut-il m'aider à comprendre pourquoi cela se produit? Je suis nouveau à Angular en passant.

Component Lorsque clique sur le bouton ou quand quelque chose est tapé dans l'entrée, le ng-clic et fonctions ng de changement en cas d'incendie, mais ils ne sont pas.

(function(angular) { 
    'use strict'; 
    angular 
    .module('app') 
    .component('coinSearch', { 
     controller: CoinSearchController, 
     controllarAs: 'coin', 
     templateUrl: 'src/coinSearch.html' 
    }); 


    function CoinSearchController(CryptoService) { 
    var coin = this; 
    var list = []; 
    coin.jank="something weird"; 
    coin.savedCoins = []; 
    coin.searchedCoin = ''; 

    function getCrypto() {      //pulls data from API 
     CryptoService 
     .retrieve() 
     .then(function(response) { 
      coin.list = response; 
     }); 
    } 

    coin.click = function() { 
     console.log('HELLOOO'); 
    }; 

    coin.showSearch = function() { 
     console.log('hello');    
     return coin.searchedCoin === ''; 
    }; 
     getCrypto(); 
    } 
})(angular); 

Modèle Modèle pour le composant ci-dessus. Il y a quelques console.logs à des fins de test.

<div class="container"> 
    <form class="search-form"> 
    <button ng-click="coin.click()">{{coin.jank}} </button> //testing 

    <input 
     type="text" 
     class="search" 
     placeholder="Search Crypto" 
     ng-model="coin.searchedCoin" 
     ng-change="coin.showSearch()"> 





    <ul class="suggestions"> 
     <li ng-hide="coin.showSearch()" ng-repeat="coins in coin.list | 
filter:coin.searchedCoin"> 
      <span>{{coins.name}} ({{coins.symbol}})</span> 
      <span>${{coins.price_usd}}</span> 
      <span><button ng- 
click="coin.addToList(coins);">Add</button></span> 
      </li> 
     </ul> 
    </form> 
    <coin-list></coin-list> 
</div> 

Answer 1

Si vous regardez votre déclaration controllerAs, vous en avez orthographié controllarAs. Cela expliquerait pourquoi rien n'écoute dans le modèle lorsque vous utilisez coin.