为什么ng-click在按钮单击时不调用函数?

时间:2018-09-06 15:31:52

标签: javascript html angularjs

无法使ng-click="speakOut()"正常工作,它不是在调用speakOut函数,但是ng-click="getCalories()"可以完美地工作。有什么想法我做错了吗?

angular.module('watson', ['ngSanitize'])
  .controller('textcntr', function($scope, $http) {

    $scope.speakOut = function() {
      $scope.text = document.getElementById("speak").value;

      $http.get('https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?username=xxx&password=xxx=Your search term').success(function(data) {
          console.log(data);
        })
        .error(function(data, status) {
          console.error('Repos error', status, data);
        })
    }
  });
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ICP 3</title>
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="application/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
  <!-- Animate.css -->
  <link rel="stylesheet" href="css/animate.css">
  <!-- Icomoon Icon Fonts-->
  <link rel="stylesheet" href="css/icomoon.css">
  <!-- Bootstrap  -->
  <link rel="stylesheet" href="css/bootstrap.css">

  <!-- Magnific Popup -->
  <link rel="stylesheet" href="css/magnific-popup.css">

  <!-- Flexslider  -->
  <link rel="stylesheet" href="css/flexslider.css">

  <!-- Theme style  -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Modernizr JS -->
  <script src="js/modernizr-2.6.2.min.js"></script>

  <script src="js/respond.min.js"></script>

</head>

<body>
  <div class="fh5co-loader"></div>

  <div id="page">
    <nav class="fh5co-nav" role="navigation">
      <div class="container-wrap">
        <div class="top-menu">
          <div class="row">
            <div class="col-xs-2">
              <div id="fh5co-logo"><a href="index.html">ICP 3</a></div>
            </div>
          </div>

        </div>
      </div>
    </nav>
    <div class="container-wrap">
      <aside id="fh5co-hero">
        <div class="flexslider">
          <ul class="slides">
            <li style="background-image: url(images/1.jpg);">
              <div class="overlay-gradient"></div>
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
                    <div class="slider-text-inner">
                      <h1>Find out calories and serving weight in grams</h1>
                      <div ng-app="food" ng-controller="foodctrl">
                        <p><button class="btn btn-primary btn-demo" href="#" ng-click="getCalories()"></i> Search</button></p>

                        <form style="font-size: large;font-family: Chalkduster">
                          <input style="font-size: large" type="text" name="food" id="calories" placeholder="Search">
                        </form>
                        <p class="currentConditions" ng-bind-html="outputCalories.html" style="font-size: 20px; color: black; font-family: Chalkduster"> </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li style="background-image: url(images/2.jpg);">
              <div class="overlay-gradient"></div>
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
                    <div class="slider-text-inner">
                      <h1>App can speak out the searched keyword</h1>
                      <!--<h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>-->
                      <div ng-app="watson" ng-controller="textcntr">
                        <p><button class="btn btn-primary btn-demo" href="#" ng-click="speakOut()"></i> Speak Out</button></p>

                        <form style="font-size: large;font-family: Chalkduster">
                          <input style="font-size: large" type="text" name="textToSpeach" id="speak" placeholder="Speack out">
                        </form>
                        <p class="currentConditions" ng-bind-html="currentweather.html"></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </aside>

      <div class="gototop js-top">
        <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
      </div>
      <script src="js/watson.js"></script>
      <!-- jQuery -->
      <script src="js/jquery.min.js"></script>
      <!-- jQuery Easing -->
      <script src="js/jquery.easing.1.3.js"></script>
      <!-- Bootstrap -->
      <script src="js/bootstrap.min.js"></script>
      <!-- Waypoints -->
      <script src="js/jquery.waypoints.min.js"></script>
      <!-- Flexslider -->
      <script src="js/jquery.flexslider-min.js"></script>
      <!-- Magnific Popup -->
      <script src="js/jquery.magnific-popup.min.js"></script>
      <script src="js/magnific-popup-options.js"></script>
      <!-- Counters -->
      <script src="js/jquery.countTo.js"></script>
      <!-- Main -->
      <script src="js/main.js"></script>

    </div>
  </div>
</body>

</html>

angular.module('food', ['ngSanitize'])
  .controller('foodctrl', function($scope, $http) {

    $scope.getCalories = function() {
      $scope.foodName = document.getElementById("calories").value;
      //$scope.stateCode = document.getElementById("CodeId").value;
      // abbrState(stateCode, 'name');

      $http.get('https://api.nutritionix.com/v1_1/search/' + $scope.foodName + '?results=0:1&fields=*&appId=xxx&appKey=xxx').success(function(data) {
          console.log(data);
          calories = data.hits[0].fields.nf_calories;
          weight = data.hits[0].fields.nf_serving_weight_grams;

          $scope.outputCalories = {
            html: "Result: " + $scope.foodName + ' contains: ' + calories + ' calories and serving weight in grams is: ' + weight + '.'
          }
        })
        .error(function(data, status) {
          console.error('Repos error', status, data);
        })
    }
  });

0 个答案:

没有答案