angular-typescript icon indicating copy to clipboard operation
angular-typescript copied to clipboard

use of private $$scope instead of $scope in class for Directive

Open afaayerhan opened this issue 10 years ago • 2 comments

I don't get it here, the injection of $scope and instead taking and making use of $$scope which is an internal implementation which is not supposed to be expose. or is it a typo or there is a reason for it?

@directive('ngModuleName', 'atSomeDirective') class SomeDirectiveController {

public static controllerAs: 'someDirectiveCtrl';
public static templateUrl: string = '/partials/some-directive.html';
public static link: angular.IDirectiveLinkFn = (scope, element, attrs, ctrl: SomeDirectiveController) => {
    ctrl.init(attrs.atSomeDirective);
};

constructor(
    @inject('$scope') private $$scope: angular.IScope,
    @inject('$parse') private $$parse: angular.IParseService
) {
    // do stuff with $$scope and $$parse;
}

public init(anArg: string): boolean {
    // do some stuff with this.$$parse and this.$$scope
}

}

afaayerhan avatar Jul 24 '15 07:07 afaayerhan

It's not a typo. But it is actually still not resolved problem. Lack of good convention. Consider such situation:

@controller('myModule', 'SomeController')
@inject('$scope')
class SomeController {

    private scope: angular.IScope;

    constructor($scope: angular.IScope) {
        this.scope = $scope;
        this.init();
    }

    public init(): void {
        this.scope.$watch('some.value.inScope', (value) => {
            doSthWith(value);
        });
    }
}

And controller is assigned to $scope with controllerAs.

This situation will produce some errors (circular reference). If we try to add for example underscore in front of any injected dependency assigned to class instance (_scope or _$scope) we will still have this problem. Actually AngularJS ignores $ and $$ prefixed object members when rendering scope in view, so it has to be prefixed with $ or $$. So I decided to use simple idea - make every dependency injected to class private (so TS knows it should be not used externally) and be sure it's prefixed with $$ to omit all angular based problems.

I feel that it's not best idea, because there is a risk of name collision with some internal AngularJS, but I did not found better solution.

ulfryk avatar Jul 26 '15 19:07 ulfryk

@afaayerhan - any idea how to solve this ?

ulfryk avatar Sep 24 '15 13:09 ulfryk