Javascript Angularjs控制器：无法设置属性'；查询'；未定义的_Javascript_Angularjs_Controller

Javascript Angularjs控制器：无法设置属性'；查询'；未定义的

javascript angularjs

Javascript Angularjs控制器：无法设置属性'；查询'；未定义的,javascript,angularjs,controller,Javascript,Angularjs,Controller,我是个新手。我想在我的控制器中将变量query设置为null，将imgType设置为“插图”，但它会抛出：未捕获的TypeError:无法设置“未定义”的属性“query” 你知道怎么了吗？否则一切都会好起来的我使用的是AngularJS 1.4.3 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&g

我是个新手。我想在我的控制器中将变量

query

设置为

null

，将

imgType

设置为

“插图”

，但它会抛出：

未捕获的TypeError:无法设置“未定义”的属性“query”

你知道怎么了吗？否则一切都会好起来的

我使用的是AngularJS 1.4.3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="ilustracka">
        <!--Controller-->
        <div ng-controller="SearchController as searchCtrl" ng-cloak>
            <!--Searching-->
            <form ng-submit="searchCtrl.search()"> 
                <input type="text" ng-model="searchCtrl.query" placeholder="search...">
                <select ng-model="searchCtrl.imgType">
                    <option value="illustration" selected>ILU</option>
                    <option value="image">IMG</option>
                </select>
                <button type="submit">SEARCH</button>
            </form>

            <!--Summary result--
            <summary></summary>-->

            <!--Result-->
            <output></output>      
        </div>

        <!--JavaScripts-->  
        <script src="libs/angularjs/angular.min.js"></script>
        <script src="scripts/ilustracka.js"></script>
        <script src="scripts/searchController.js"></script>
        <script src="scripts/outputDirective.js"></script>
        <script src="scripts/searchApiService.js"></script>        
    </body>
</html>

伊路斯塔卡

(function(){
    "use strict";   
    angular
            .module("ilustracka", []);
}());

//您必须创建通过依赖项数组的应用程序模块，无论是否为空。 angular.module（'ilustracka'，[]）//添加空括号

您的问题是如何将

searchApi

服务注入控制器。

$inject

不是一个方法，而是一个属性，正确的语法应该是：

SearchController.$inject = ['searchApi'];

使用原始代码

SearchController（）。$inject['searchApi']；

它抛出了未经处理的错误，因为

SearchController（）

（函数调用的结果）返回

undefined

，undefined没有属性

$inject

。但是，它不会阻止进一步的控制器实例化，但随后会发生新错误-由于缺少依赖项注入而导致未知提供程序。这会阻止正确的控制器实例创建。

如果您的应用程序之前已在

脚本/i中创建，则不会lustracka.js

我猜。你的搜索在定义之前就已经声明了，我在定义下移动了，看看它对你有用，我不认为你需要注入$scope，因为你正在使用你的控制器作为类，正如DevVersion所建议的那样，但他为什么推荐我的方式呢？在jsbin中，你的方法抛出了一个错误。我的屏幕上没有看到错误。您会遇到什么类型的错误？您可以创建plunker或JSFIDLE吗？这样会更容易调试searchApi的不正确依赖项注入。

$inject

应该用于控制器构造函数，而不是其实例：

SearchController.$inject=['searchApi']；

（无括号）。@plamut

SearchController.$inject['searchApi']

实际上什么也不做。应该是

SearchController.$inject=['searchApi']

@dfsq抱歉，键入太快，谢谢注意。我修正了我的评论。（太过关注括号，但忘了修正其他问题）。

   (function () {
  'use strict';
  angular
    .module('ilustracka', [])
    .controller('SearchController', ['searchAPi', function (searchApi) {
      var vm = this;
      vm.query = null;//search string
      vm.imgType = 'illustration';//type of search image - (ilu|img)
      vm.images = null;//result of query - empty object
      vm.result = null;//showing result or info message
      function search() {
        if (vm.query) {
          searchApi.searchImg(vm.query, vm.imgType);
          vm.images = searchApi.getImages();
          vm.result = searchApi.getResult();
        }
      }
      vm.search = search;
    }]);
}());

SearchController.$inject = ['searchApi'];