CODEWITHSUNDEEP
angularjstypescriptnuget-package
Martin Staufcik
Martin Staufcik

Reputation: 9502

AngularJS IDirectiveLinkFn interface

Examples for implementing the directive's link method in typescript use as the fourth parameter instance of ng.INgModelController

public link($scope: ng.IScope, el: JQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController)

but this does not compile for me (I have the latest angularjs.TypeScript.DefinitelyTyped 6.5.6 installed), because the interface IDirectiveLinkFn expects as the fourth parameter instance of IController and not INgModelController.

If the fourth parameter is modified to be of type IController, now it compiles, but the interfaces are very different. How is it possible after this change to access the model properties ngModel.$viewValue or ngModel.$render inside link function?

The packages.config contains these packages:

<package id="angularjs.TypeScript.DefinitelyTyped" version="6.5.6" targetFramework="net452" />
<package id="angular-material.TypeScript.DefinitelyTyped" version="1.6.4" targetFramework="net452" />
<package id="angular-ui.TypeScript.DefinitelyTyped" version="2.4.3" targetFramework="net452" />

Upvotes: 3

Views: 427

Answers (2)

Estus Flask
Estus Flask

Reputation: 223259

Since INgModelController doesn't extend IController and isn't compatible with it (this is an oversight in AngularJS typing), the solution is to use union type:

public link($scope: ng.IScope, el: JQuery, attrs: ng.IAttributes, 
  ngModel: ng.INgController & ng.INgModelController) {...}

Upvotes: 4

Telman
Telman

Reputation: 1487

Do you have @types declarations installed ? For example, in "@types/angular": "^1.6.43", in IController type you will find the next options:

// IController implementations frequently do not implement any of its methods.
// A string indexer indicates to TypeScript not to issue a weak type error in this case.
[s: string]: any;

If I correct, this means you can use any of properties from the IController type.

Another option is to use a type coercion, something like this:

let viewValue = (ngModel as ng.INgModelController).$viewValue;

Upvotes: 1

Related Questions