尝试在AngularJS中使用控制器

我已经实现了自动完成功能，现在我正试图集成到我的主应用程序中。这是我设计的控制器功能

(function() {
      'use strict';
      angular
        .module('MyApp')
        .controller('DemoCtrl', DemoCtrl);

      function DemoCtrl($http) {
        this.querySearch = function (query) {
           return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
              return result.data;
            });
        }
      }
    })();

这是我在第一个场景中的HTML：

<div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
      <md-content class="md-padding">
        <form name="searchForm" ng-submit="$event.preventDefault()">
            <div layout-gt-sm="row">
            <md-input-container flex="">
            </md-input-container>

            <md-autocomplete md-floating-label="" 
                            flex="" 
                            md-item-text="item.Symbol"
                            md-items="item in ctrl.querySearch(ctrl.searchText)" 
                            md-search-text="ctrl.searchText" 
                            md-selected-item="ctrl.selectedItem" 
                            md-no-cache="ctrl.noCache" 
                            md-input-name="autocompleteField" 
                            required="">
              <input>
              <md-item-template>
                <span md-highlight-text="ctrl.searchText">{{item.Symbol+" - "+item.Name+" ("+item.Exchange+")"}}</span>
              </md-item-template>
              <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
                <div ng-message="required">You <b>must</b> have a favorite movie.</div>
                <div ng-message="minlength">Your entry is not long enough.</div>
                <div ng-message="maxlength">Your entry is too long.</div>
              </div>
            </md-autocomplete>
          </input>
          </div>
    </form>
  </md-content>
</div>

---

我对angular非常陌生，我无法将第一种格式映射到第二种格式。请让我知道如何将第一个映射到第二个。TIA.

我不确定困惑在哪里。这两种情况非常相似

app.controller("MyCtrl", function ($scope) {
    this.querySearch = function (query) { ... }
});

---

在AngularJS中进行绑定有两种方式

控制器为这是在第一种格式中完成的，您可以在html中看到

DemoCtrl为ctrl

，ctrl变量代表您的控制器，在您的控制器中，您可以看到

this

，它的每个属性都可以通过html中的

ctrl

访问。例如：

ctrl.MyAttribute

第二种方式是使用

$scope

服务。这就是第二种格式所做的。只要调用相应的控制器，

$scope

的每个属性都可以在html中访问。例如：如果您的控制器中有

$scope.myattribute

，那么在html中您可以像这样访问

{{myattribute}

这起到了作用：

<script>
var app = angular.module("MyApp");
app.controller("DemoCtrl", function ($http) {
    this.querySearch = function (query) 
    { 
          return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
          return result.data;
        });
    }
});
</script>

var app=角度模块（“MyApp”）；
app.controller（“DemoCtrl”，函数（$http）{
this.querySearch=函数（查询）
{ 
返回$http.get（'http://127.0.0.1:8888/autocomplete/“+escape（查询））。然后（函数（结果）{
返回结果数据；
});
}
});

您到底想做什么？我有一个API，可以用来将建议发送回前端。第一个控制器为我做这项工作。而第二个用于切换帧。展示，隐藏。我使用的是Angular 1.5.5。希望这能把事情弄清楚。问题是我不明白函数（）是如何在第一种格式的第一行中使用的。第二个似乎更直观。var-app=angular.module（“MyApp”[“ngAnimate”]）可能重复；app.controller（“DemoCtrl”，function（$http）{this.querySearch=function（query）{return$http.get（''+escape（query））.then（function（result）{return result.data；}）；}）；我做了这个改变，仍然不起作用。我真的很抱歉，但我仍在努力学习“不工作”是没有用的。请更具体地说明问题（在您的问题中以及此处），并使用代码格式以确保易读性（注释中的反引号）。谢谢您的帮助，先生，我丢失了ngAnimate文件，因此出现了此问题。祝你有一个愉快的一天。然后你应该删除这个问题或提供一个正确的答案来解决实际问题。

<script>
var app = angular.module("MyApp");
app.controller("DemoCtrl", function ($http) {
    this.querySearch = function (query) 
    { 
          return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
          return result.data;
        });
    }
});
</script>