首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将angularjs指令实现为Typescript中的类

将angularjs指令实现为Typescript中的类
EN

Stack Overflow用户
提问于 2014-05-08 15:59:29
回答 2查看 19.2K关注 0票数 17

因此,在看了一些typescript中的angularjs指令示例之后,似乎大多数人都同意在实现它们时使用函数而不是类。

我更喜欢将它们作为一个类,并尝试按如下方式实现它们:

代码语言:javascript
复制
module directives
{    
    export class search implements ng.IDirective
    {        
        public restrict: string;
        public templateUrl: string;

        constructor()
        {            
            this.restrict = 'AE';
            this.templateUrl = 'directives/search.html';
        }

        public link($scope: ng.IScope, element: JQuery, attributes: ng.IAttributes)
        {
            element.text("Hello world");

        }
    }
} 

现在,这个方法工作得很好。但是,我需要一个具有某些属性的独立作用域,并且我正在努力找出如何在类本身中包含它。

逻辑规定,因为我可以

代码语言:javascript
复制
public restrict: string;
public templateUrl: string;

我应该能够拥有这样的东西:

代码语言:javascript
复制
public scope;

但我不确定这是否正确,或者如何从那里继续(即如何将属性添加到作用域中)。

有人知道怎么解决这个问题吗?(如果可能的话,希望不必恢复到函数)

谢谢,

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-08 16:57:28

假设您拥有的东西在没有孤岛作用域的情况下工作,则以下内容应该与孤岛作用域一起工作:

代码语言:javascript
复制
module directives
{    
    export class search implements ng.IDirective
    {        
        public restrict = 'AE';
        public templateUrl = 'directives/search.html';
        public scope = {
            foo:'=',
            bar:'@',
            bas:'&'
        };


        public link($scope: ng.IScope, element: JQuery, attributes: ng.IAttributes)
        {
            element.text("Hello world");
        }
    }
}
票数 20
EN

Stack Overflow用户

发布于 2015-08-21 22:54:12

以下是我的建议:

指令:

代码语言:javascript
复制
import {directive} from '../../decorators/directive';

@directive('$location', '$rootScope')
export class StoryBoxDirective implements ng.IDirective {

  public templateUrl:string = 'src/module/story/view/story-box.html';
  public restrict:string = 'EA';
  public scope:Object = {
    story: '='
  };

  public link:Function = (scope:ng.IScope, element:ng.IAugmentedJQuery, attrs:ng.IAttributes):void => {
    // console.info(scope, element, attrs, this.$location);
    scope.$watch('test', () => {
      return null;
    });
  };

  constructor(private $location:ng.ILocationService, private $rootScope:ng.IScope) {
    // console.log('Dependency injection', $location, $rootScope);
  }

}

模块(registers指令...):

代码语言:javascript
复制
import {App} from '../../App';
import {StoryBoxDirective} from './../story/StoryBoxDirective';
import {StoryService} from './../story/StoryService';

const module:ng.IModule = App.module('app.story', []);

module.service('storyService', StoryService);
module.directive('storyBox', <any>StoryBoxDirective);

装饰器(添加inject和produce指令对象):

代码语言:javascript
复制
export function directive(...values:string[]):any {
  return (target:Function) => {
    const directive:Function = (...args:any[]):Object => {
      return ((classConstructor:Function, args:any[], ctor:any):Object => {
        ctor.prototype = classConstructor.prototype;
        const child:Object = new ctor;
        const result:Object = classConstructor.apply(child, args);
        return typeof result === 'object' ? result : child;
      })(target, args, () => {
        return null;
      });
    };
    directive.$inject = values;
    return directive;
  };
}

我考虑过将module.directive(...)module.service(...)转移到StoryBoxDirective.ts等类文件中,但还没有做出决定和重构;)

你可以在这里查看完整的工作示例:https://github.com/b091/ts-skeleton

指令在这里:https://github.com/b091/ts-skeleton/blob/master/src/module/story/StoryBoxDirective.ts

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23535994

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档