Typescript 在我的指令中找不到范围或属性

Posted 2023-03-13

【中文标题】Typescript 在我的指令中找不到范围或属性

【英文标题】：Typescript is not finding scope or attributes inside of my directive

【发布时间】：2015-07-31 19:38:36

【问题描述】：

我更多地使用 typescript 来为我的应用程序进行错误检查和键入，而不是真正使用任何 ES6 样式代码，但我遇到了问题。在我的链接函数中的角度指令 scope.animate 和 attr.animate 没有被打字稿识别我安装了 angular 和 jquery 的类型，并且我有参考链接地方。有什么我想念的吗？这是我的 Typescript 文件 (main.ts)。

/// <reference path="typings/angularjs/angular.d.ts"/>
/// <reference path="typings/angularjs/angular-animate.d.ts"/>
/// <reference path="typings/greensock/greensock.d.ts"/>
var app = angular.module("App", ["ngAnimate"]);

app.factory("DataService", ()=>
	
	var data = ;
	
	return data;
	
);

app.service("Notify", function()
	
	var notifyService = this;
	
	notifyService.message = "Some message.";	
	notifyService.test = function()
		return "new Message";
	
	
	notifyService.showHide = false;
	
	notifyService.setShowHide = function(value:boolean)
		
		notifyService.showHide = value;
		
	
	
	notifyService.setMessage = function(val)
		
		notifyService.message = val;
		
	
	
	notifyService.style = "color:white; font-weight:bold; background-color:black;"
	
)

app.controller("AppCtrl", function ($scope, $q, $http, Notify, DataService) 
	
	var appCtrl = this;
	appCtrl.notify = Notify;

);

app.animation(".fade", function()
	
	return 
		addClass:function(element, className)
			if(!TweenMax.isTweening(element))
				TweenMax.to(element, 2, opacity:1)
		,
		removeClass:function(element, className)
			if(!TweenMax.isTweening(element))
				TweenMax.to(element, 2, opacity:0)
		
	
	
);

app.directive("clickable", function (Notify, DataService, $http):ng.IDirective
	
	return 
		restrict:"ACE",
		scope:
			animate:"@"
		,
		link:function(scope, element, attr)
        
            scope.animate;
			
			element.bind("click", function()

				scope.$apply(function()
					
					Notify.setMessage("Message from click event");
					console.log(Notify.message);
		
					
				)
				
			);
			
		
	
	
)

angular.element(document).ready(function()
	
	angular.bootstrap(document.querySelector("body"), ["App"]);
	
)

【问题讨论】：

这是你编译的js文件还是ts文件？如果是 ts 文件，那么没有任何类型说明的 element 和 attr 应该只是 any 类型，所以你不应该遇到任何这些问题。

这是我的打字稿文件。当我尝试使用 scope.animate 或访问 attr 时，它不会编译

【参考方案1】：

在没有任何类型的情况下你得到这个错误真的很奇怪。通常，如果您这样做，您可能会遇到此错误：

    link:function(scope:ng.IScope, 
               element: ng.IAugmentedJQuery,
               attrs: ng.IAttributes,)

但你不是这样，默认情况下这些参数应该是any类型。但是，您应该能够通过创建自定义类型来修复它：

interface clickableVM extends ng.IScope
    animate:string;


interface clickableAttrs extends ng.IAttributes
    animate:string;

并将它们设置为参数：

 link:function(scope:clickableVM , 
               element: any,
               attrs: clickableAttrs)

【讨论】：

修复了它。我猜你必须将它添加到 Angular 类型中的 IScope 接口中。我对打字稿还是有点陌生​​。我之前写过 C# 代码并做过 asp.net MVC，所以打字稿更容易上手。但我很惊讶它没有识别范围对象。它认出了它。

我是否也必须为控制器做同样的事情？

@Jesse 这取决于。您不一定非要这样做。但这就是使用Typescript 的全部目的。 :)

好的，我会用它做更多的实验。