Question

我不太了解ng-controller如何与Angular一起使用：

我有我的 documentSearch.component.html：（这只是链接到控制器的部分）

<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上使用它，是否必须为控制器创建另一个类？

对于Typescript，我需要对此代码进行哪些更改？

谢谢

Answer 1

您正在混用AngularJS（角度1.x）和Angular（角度2-6）代码。

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

尽管这两个框架是由同一团队开发的，但它们在许多层次上都完全不同。例如，Angular专注于组件，而在AngularJS中，控制器（通常）与模板分离。模板语法也完全不同，虽然Angular基于TypeScript本身，但AngularJS总体上仅对TypeScript提供中等支持。

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

Answer 2

看起来您正在尝试学习角度知识，但您不知道它的历史。请参阅Angular Tutorial。您将在此处找不到ng-controller。由于它是AngularJS的一部分，因此它是角度生产领域中的第一家。 Angular 2被重写，而不仅仅是从AngularJS升级。因此，Angular 2及更高版本不遵循这些语法。

带打字稿的角度ng-controller

2 个答案: