$rootScop, $root value in angular2?

Question

I want to use $rootScope, and $root value in angular2. Also I confuse how to convert angularjs directive in angular2 like below.

.directive('thisDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function(evt){
                var getMethods = {
                    get_link:function(){
                        var observer = {
                            override:true,
                            triggerIndex:0,
                            onLink:function(link){
                                scope.$root.getThisVal = false;
                                (scope.$$phase || scope.$digest());}
                        };
                        scope.$root.bitlyUrl = "";
                        scope.$root.modelFlags.share_window = scope.$root.modelFlags.steps_upload = scope.$root.getThisVal = true;                          $('.addthisbtn[datatitle=Email]').trigger('click',observer )
                    },
                    addthis_button:function(){
                        var observer = {
                            override:true,
                            triggerIndex:0
                        };
                        $('.addthis-btn[data-title=Email]').trigger('click',observer )
                    }
                };
                getMethods[attrs['thisDirective']]();
            });
        }
    };
})

To convert Angular 1 directives to Angular 2, I found this blog post helpful: http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/ — Mark Rajcok, Dec 22 '15 at 16:41

score 1 · Answer 1 · edited Sep 20 '17 at 14:58

In fact, there is no more concepts of scopes in Angular 2. There are now two concepts:

Directive: "its simplest kind of directive is a decorator. Directives are useful for encapsulating behavior."
Component: "Component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components."

Most of time to implement an Angular1 directive, you need to create a component and use its state within the associated template.

You could have a look at the official "5min quickstart" of angular.io: https://angular.io/guide/quickstart. There are a lot of hints about creating a component.

This link could also give you more elements: https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md

If you tell us, what is your use case, perhaps I could give you a more precise answer...

Hope it helps you, Thierry

score 0 · Answer 2 · edited May 23 '17 at 11:54

Well explained by @thierry but i want to add some points...

--- Well as we all know there is no $scope and $rootscope feature in the angular2 but instead of this if we want to use some service,variable used throughout the whole app we can provide that variable/service at the time of bootstraping of the app. by using this way that service is available everywhere in the app without import like this.

bootstrap(App,[ROUTER_PROVIDERS, HTTP_PROVIDERS, GlobalService, provide(LocationStrategy,{useClass:HashLocationStrategy})]);

here like ROUTER_PROVIDERS, or Globalservice we provide with bootstrap we can use this anywhere.

--- if i talke about directives there are three types of directives in the angular2 explained here. and for detailed info you found here https://angular.io/docs/ts/latest/guide/attribute-directives.html.

How is injecting `GlobalService` different from injecting `$rootScope`? Typically `$rootScope` in injected. — Aluan Haddad, Mar 02 '17 at 05:53

$rootScop, $root value in angular2?

2 Answers2