Ng-Klick und ng-change werden nicht ausgelöst, wenn Komponente und Vorlage angular 1.6

Question

Ich versuche, eine Funktion auszulösen, wenn etwas in den Eingang eingegeben wird. Aus irgendeinem Grund funktioniert es nicht, wenn ich eine Vorlage und eine Komponente verwende. Kann mir jemand helfen, herauszufinden, warum das passiert? Angular bin ich übrigens neu.

Komponente Wenn die Schaltfläche geklickt oder wenn etwas in den Eingang eingegeben haben, sollte die ng klicken und ng Wechselfunktionen feuern, aber sie sind es nicht.

(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); 

Vorlage Vorlage für die obige Komponente. Es gibt einige console.logs für Testzwecke.

<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

Wenn Sie an Ihrem controllerAs Aussage aussehen, haben Sie es als controllarAs geschrieben. Das würde erklären, warum nichts in der Vorlage zuhören, wenn Sie coin verwenden.