未捕获的ReferenceError:在SearchController中未定义$ scope

时间:2017-11-20 07:21:11

标签: javascript angularjs

我对Angular很新。我正在尝试使用星球大战API实现搜索页面,但未定义$ scope。我不确定这里有什么问题:

0x00000000

我将$ scope注入我的控制器,但仍显示它未定义。

1 个答案:

答案 0 :(得分:0)

您应该使用$ http服务。这是工作片段:

'use strict';
var app = angular.module('myApp',[]);

/* Application controller (for top-level auth) */
app.controller('SearchController', ['$location',
    '$scope', '$http',
    function($location, $scope, $http) {

      console.log('*** SearchController ***');

      $scope.items = [];
      $scope.loading = false;
      var apiURL = "https://swapi.co/api/planets";
      $scope.loadData = function() {
       $scope.loading = true;
        $http.get(apiURL)
          .then(function(response) {
            $scope.showDetail(response.data);
             $scope.loading = false;
          });
      };
      $scope.loadData();

      $scope.showDetail = function(data) {
        $scope.items = data.results;
      };

    }
  ]

);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="SearchController" ng-cloak>
    
    <ul ng-if="items.length>0 && !loading" >
      <li ng-repeat="item in items">{{item.name}}</li>
    </ul>
    <div ng-if="loading">Loading...</div>

  </div>