Question

我试图根据用户输入显示任何位置的天气。为此，我创建了一个输入字段，它将任何位置作为输入。为此，我使用了

NG-模型

指令绑定用户输入并将其放在$ http参数字段中。

该应用应该做的是根据用户输入显示天气。如果有人能查看我的代码并告诉我我做错了什么，我将不胜感激。

html代码：

<!DOCTYPE html>
<html>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
  <form>
  Location: <input type="text" ng-model="vm.location" value="Paris">
  <button type="button" ng-click=submit()>Submit</button>
  </form>
    <h1>{{ vm.data| json}}</h1>

  </div>

</body>

</html>

app.js：

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($http) {

  var vm = this;


  $scope.submit = function(){

    var URL = 'https://api.apixu.com/v1/current.json';
    var request = {
      method: 'GET',
      url: URL,
      params: { 
        q: vm.location,
        mode:'json',
        cnt:'7',
        units:'imperial',
        key:'1a17370dc8e34f09946231209170404' 
      }
    }; 

    $http(request)
      .then(function(response) {
        vm.data = response.data;


      }).
      catch(function(response) {
        vm.data = response.data;

      });
  };

});

Answer 1

如果控制器用＆＃34; controllerAs＆＃34;来实例化。语法，请勿使用$scope，请使用this上下文。

在模板中：

  <div ng-controller="DemoCtrl as vm">
  <form>
  <!-- WRONG
  Location: <input type="text" ng-model="location" value="Paris">
  <button type="button" ng-click=submit()>Submit</button>
  </form>
  -->
  <!-- RIGHT -->
  Location: <input type="text" ng-model="vm.location" value="Paris">
  <button type="button" ng-click=vm.submit()>Submit</button>
  </form>

JS：

  var vm = this;
  //vm.location = location;

  //$scope.submit = function(){
  vm.submit = function(){

    var URL = 'https://api.apixu.com/v1/current.json';
    var request = {
      method: 'GET',
      url: URL,
      params: { 
        //q:'vm.location',
        //USE variable
        q: vm.location,
        mode:'json',
        cnt:'7',
        units:'imperial',
        key:'1a17370dc8e34f09946231209170404' 
      }
    };

你能解释为什么它是vm.location而不仅仅是{-1}}在ng-model指令中？

当使用＆＃34; controllerAs＆＃34;来实例化控制器时语法，$compile service将控制器的location上下文绑定到具有指定名称的this对象的属性。要引用控制器$scope上下文的属性，模板应该在这些属性名称前面加上＆＃34; controllerAs＆＃34;中指定的名称。结合。

AngularJS团队建议遵循＆＃34;最佳实践＆＃34; always have a '.' in your ng-models - 观看3分钟。 Misko用this演示了原始绑定问题。

有关详细信息，请参阅AngularJS Wiki - Understanding Scopes.

将ng-model值绑定到http参数中

1 个答案: