"+"<输入 ng-model=\"SearchedValue\"/>"+"<button ng-click=\"Ctrl.Search()\" >Search</button>"+"<p> 用于搜索值 <b>{{SearchedValue}}</b> " +我们发现:<i>{{FoundResult}}</i></p>"+"</div>";公共控制器:字符串 = 'CustomerSearchCtrl';公共控制器为:字符串 = 'Ctrl';公共范围 = {};}app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
该指令在 TypeScript 中声明并立即注入到我们的模块中
现在，我们在 Controller 中声明一个用作强类型对象的作用域:
导出接口 ICustomerSearchScope 扩展了 ng.IScope{SearchedValue:字符串；发现结果:字符串；Ctrl:客户搜索Ctrl；}
现在我们可以声明简单的控制器
导出类 CustomerSearchCtrl{静态 $inject = ["$scope", "$http"];构造函数(受保护的 $scope:CustomerSearch.ICustomerSearchScope，受保护的 $http: ng.IHttpService){//去做}公共搜索():无效{这个.$http.get("data.json").then((响应:ng.IHttpPromiseCallbackArg) =>{var data = response.data;this.$scope.FoundResult = 数据[this.$scope.SearchedValue]||数据[默认"];});}}app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);}
在此处操作
中观察所有内容
How to define my controller using TypeScript. As right now it's in angular js but i want to change this for type script.So that the data can be retrieved quickly.
function CustomerCtrl($scope, $http, $templateCache){
$scope.search = function(search)
{
debugger;
var Search = {
AccountId: search.AccountId,
checkActiveOnly: search.checkActiveOnly,
checkParentsOnly: search.checkParentsOnly,
listCustomerType: search.listCustomerType
};
$scope.customer = [];
$scope.ticket = [];
$scope.services = [];
$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search).
success(function(data, status, headers, config) {
debugger;
$scope.cust_File = data[0].customers;
$scope.ticket_file = data[0].tickets;
$scope.service_file = data[0].services;
}).
error(function(data, status)
{
console.log("Request Failed");
});
}
}
解决方案
I decided to add another answer, with working example. It is very simplified version, but should show all the basic how to us TypeScript and angularJS.
There is a working plunker
This would be our data.json playing role of a server.
{
"a": "Customer AAA",
"b": "Customer BBB",
"c": "Customer DDD",
"d": "Customer DDD",
"Default": "Not found"
}
This would be our starting module MainApp.js:
var app = angular.module('MainApp', [
'CustomerSearch'
]);
angular.module('CustomerSearch',[])
So later we can use module CustomerSearch. This would be our index.html
<!DOCTYPE html>
<html ng-app="MainApp" ng-strict-di>
<head>
<title>my app</title>
<script data-require="angular.js@*"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.js"
></script>
<script src="MainApp.js"></script>
<script src="CustomerSearch.dirc.js"></script>
</head>
<body>
<customer-search></customer-search> // our directive
</body>
</html>
Now, we would see the declaration of 1) directive, 2) scope, 3) controller. This all could be in one file (check it here). Let's observe all three parts of that file CustomerSearch.dirc.js (it is CustomerSearch.dirc.ts .. but for plunker I complied that)
1) get reference to module 'CustomerSearch' declared above and declare directive
/// <reference path="../scripts/angularjs/angular.d.ts" />
module CustomerSearch
{
var app = angular.module('CustomerSearch');
export class CustomerSearchDirective implements ng.IDirective
{
public restrict: string = "E";
public replace: boolean = true;
public template: string = "<div>" +
"<input ng-model=\"SearchedValue\" />" +
"<button ng-click=\"Ctrl.Search()\" >Search</button>" +
"<p> for searched value <b>{{SearchedValue}}</b> " +
" we found: <i>{{FoundResult}}</i></p>" +
"</div>";
public controller: string = 'CustomerSearchCtrl';
public controllerAs: string = 'Ctrl';
public scope = {};
}
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
The directive was declared in TypeScript and immediately injected into the our module
Now, we declare a scope to be used as a strongly typed object in Controller:
export interface ICustomerSearchScope extends ng.IScope
{
SearchedValue: string;
FoundResult: string;
Ctrl: CustomerSearchCtrl;
}
And now we can declare simple controller
export class CustomerSearchCtrl
{
static $inject = ["$scope", "$http"];
constructor(protected $scope: CustomerSearch.ICustomerSearchScope,
protected $http: ng.IHttpService)
{
// todo
}
public Search(): void
{
this.$http
.get("data.json")
.then((response: ng.IHttpPromiseCallbackArg<any>) =>
{
var data = response.data;
this.$scope.FoundResult = data[this.$scope.SearchedValue]
|| data["Default"];
});
}
}
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
}
Observe that all in action here
这篇关于如何使用 TypeScript 定义我的控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
