angularjs - 带有 typescript 的 Angular ng-controller

Question

我不太明白 ng-controller 如何与 Angular 一起工作:

我有我的documentSearch.component.html:(那只是链接到 Controller 的部分)

<div ng-controller=mainCtrl>
      <div mass-autocomplete>
        <input ng-model="dirty.value"
               mass-autocomplete-item="autocomplete_options">
      </div>
</div>

和documentSearch.component.ts:

@Component({
  selector: 'app-documentsearch',
  templateUrl: './document-search.component.html',
  styleUrls: ['./document-search.component.css']
})

export class DocumentSearchComponent implements OnInit {

    constructor() {...}

    ngOnInit(){...}

    someFunction(...){...}

}

我想尝试的代码是这个:

var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
app.controller('mainCtrl', function ($scope, $sce, $q) {
$scope.dirty = {};

var states = ['Alabama', 'Alaska', 'California', /* ... */ ];

function suggest_state(term) {
var q = term.toLowerCase().trim();
var results = [];

// Find first 10 states that start with `term`.
for (var i = 0; i < states.length && results.length < 10; i++) {
  var state = states[i];
  if (state.toLowerCase().indexOf(q) === 0)
    results.push({ label: state, value: state });
}

return results;
}

 $scope.autocomplete_options = {
   suggest: suggest_state
 };
});

但我不明白如何使用它。我是否必须在我的 documentSearch.component.ts 上使用它，我是否必须为 Controller 创建另一个类？

我必须针对 Typescript 更改此代码的哪些内容？

谢谢

Answer 1

你搞混了 AngularJS ( Angular 1.x)和 Angular ( Angular 2-6)代码。

documentSearch.component.ts 文件是现代 Angular，但 documentSearch.component.html 是 AngularJS 模板。您想要尝试的代码也是 AngularJS。

虽然这两个框架是由同一个团队开发的，但它们在许多层面上完全不同。例如，Angular 专注于组件，而在 AngularJS 中， Controller (通常)与模板分离。模板语法也完全不同，虽然 Angular 本身是基于 TypeScript 的，但 AngularJS 总体上对 TypeScript 的支持很一般。

总结:选择一个框架并坚持使用它。您无法轻松地将 AngularJS 代码集成到 Angular 应用程序中，反之亦然。