Question

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

(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>

现在，应用程序当前包含以下格式的控制器：

var app = angular.module("assign8", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
$scope.myValue_sec = false; 
});

我对角度很新，我无法将第一种格式映射到第二种格式。请告诉我如何从第一到第二映射。 TIA。

Answer 1

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

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

Answer 2

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

控制器是以第一种格式完成的，您可以在html中看到DemoCtrl as ctrl ctrl变量代表您的控制器，在控制器中，您看到{{1} }，每个attribut都可以通过html中的this访问。例如：ctrl。
第二种方式是使用ctrl.myAttribut服务。这是以第二种格式完成的。只要调用相应的控制器，就可以在html中访问$scope的每个属性。例如：如果您的控制器中有$scope，则在您的HTML中，您可以像$scope.myAttribut一样访问。

Answer 3

这有效：

<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>

试图在AngularJS中使用控制器

3 个答案: