Question

我正在尝试在输入中键入内容时触发函数。出于某种原因，当我使用模板和组件时，它无法正常工作。任何人都可以帮我弄清楚为什么会这样吗？顺便说一句，我是Angular的新手。

组件单击按钮或在输入中输入内容时，ng-click和ng-change功能应该触发，但它们不会触发。

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

模板上面组件的模板。有一些console.log用于测试目的。

<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

如果您查看controllerAs声明，则拼写为controllarAs。这可以解释为什么当您使用coin时，模板中没有任何内容正在侦听。

使用组件和模板角度1.6时，不会触发Ng-click和ng-change

1 个答案: