how to use angular 1 variables inside the angular 2 component

Question

login.js

var app= angular.module('login',[]);

app.controller('LoginCtrl', function($scope)
{

$scope.sayhello="Hello"+ $scope.username;

}).directive('loginDir', function(){
 return {
  scope:{},
  templateUrl: 'logintpl.html',
  controller: 'LoginCtrl'
};
});

var adapter = new ng.upgrade.UpgradeAdapter();

AppComponent = ng.core
  .Component({
    selector: 'login',
    directives: [adapter.upgradeNg1Component('loginDir')],
    template: '<login-dir></login-dir>'
    })
  .Class({
    constructor: function() {}
  });

app.directive('login', adapter.downgradeNg2Component(AppComponent));
document.addEventListener('DOMContentLoaded', function() {
  adapter.bootstrap(document.body, ['login']);
  console.log(adapter);
});

logintpl.html

<input type="name" ng-model="username">

how can i use $scope.sayhello variable inside the component.

eg: component template should be,template:'<login-dir></login-dir>{{sayhello}}

Abhilash Augustine · Accepted Answer · 2016-01-21 09:43:17Z

2

AppComponent = ng.core
  .Component({
    selector: 'login',
    directives: [adapter.upgradeNg1Component('loginDir')],
    template: '<login-dir></login-dir> {{sayhello}}'
    })
  .Class({
    constructor: function() {
        this.sayhello = "Hello World !!!";
    }
  });

Explanation

In Angular 2, there is no model called $scope. They replaced it with simple variables with in the Class.

We can consider the whole Class as a controller in Angular 1.x. We can create variable with this.variable_name with in a Class. constructor is the function which will be invoked first in the component. So, we can initialize all our variable here.

So, $scope.variable_name in Angular 1.x is same (or likely to) as this.variable_name in Angular 2.

edited Jan 21, 2016 at 9:43

answered Jan 21, 2016 at 9:19

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Buddhika Kulathilaka Over a year ago

is this sayhello variable similar to the $scope.sayhello variable in directive

Buddhika Kulathilaka Over a year ago

is this.sayhello same as $scope.sayhello

Abhilash Augustine Over a year ago

@BuddhikaKulathilaka yes

Buddhika Kulathilaka Over a year ago

$scope.sayhello=hello username and this.sayhello="hello world". I'm asking is there any way to use $scope.sayhello inside the component

Abhilash Augustine Over a year ago

@BuddhikaKulathilaka, Sorry, I didn't get what you mean. Are you upgrading angular application from 1.x to 2?

|

Thierry Templier · Accepted Answer · 2016-01-21 09:52:05Z

2

In fact the sayhello attribute can be only used within your loginDir directive since it's defined in its associated scope.

You could have a use case like that:

app.controller('LoginCtrl', function($scope) {
  $scope.sayhello = function() {
    console.log("Hello"+ $scope.username);
  }
}).directive('loginDir', function() {
  return {
    scope:{},
    templateUrl: 'logintpl.html',
    controller: 'LoginCtrl'
  };
});

In the template of your Angular1 directive, you will be able to use this function:

<input type="name" ng-model="username">
<span ng-click="sayhello()">Test</span>

I don't know what you exactly want to do. Here is the corresponding plunkr: https://plnkr.co/edit/ribHwk8uSXHRv0JkLlo0?p=preview.

Edit

You can have access to attributes of the parent component from the directive since the Angular1 directive scope is internal to your directive. With Angular1, you can't either. The only thing you could do is to define a parameter to your Angular1 directive that corresponds to an attribute of your parent component and update it by reference.

Here is a sample

app.controller('LoginCtrl', function($scope) {
  $scope.updateSayhelloInParent = function() {
    console.log("Hello"+ $scope.username);
    $scope.sayhello.message = $scope.username;
  }
}).directive('loginDir', function(){
  return {
    scope:{
      sayhello: '='
    },
    templateUrl: 'logintpl.html',
    controller: 'LoginCtrl'
  };
});

And the way to use the directive in the component:

AppComponent = ng.core
  .Component({
    selector: 'login',
    directives: [adapter.upgradeNg1Component('loginDir')],
    template: `
      <login-dir [sayhello]="sayHello"></login-dir>

      <br/><br/>

      SayHello in component:
      {{sayHello | json}}
    `
    })
  .Class({
    constructor: function() {
      this.sayHello = {
        message: 'default message'
      }
    }
  });

Corresponding plunkr is here: https://plnkr.co/edit/ribHwk8uSXHRv0JkLlo0?p=preview.

Hope it helps you, Thierry

edited Jan 21, 2016 at 9:52

answered Jan 21, 2016 at 9:31

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

5 Comments

Buddhika Kulathilaka Over a year ago

i want to know is it possible to use variables in directive inside the component

Buddhika Kulathilaka Over a year ago

if I want to used variable value define in directive inside the component,is it possible

Thierry Templier Over a year ago

I don't think so because your scope is internal to your directive. With Angular1, you can't either. The only thing you could do is to define a parameter to your Angular1 directive that corresponds to an attribute of your parent component and update it by reference.

Buddhika Kulathilaka Over a year ago

then if I further write the code using angular 2 is it not possible to use upgraded directive variables with new angular components

Thierry Templier Over a year ago

In fact, with Angular2, you can leverage two way bindings for components using custom events. This way you will be able to use something like that: <login-dir [(sayhello)]="sayHello"></login-dir>. This way sayhello (child component) and sayHello (parent component) will be automatically linked and updated accordingly (even for primitive types like string). This can be done internally in the child component using @Input() sayhello:string and @Ouput() sayhelloEvent:EventEmitter.

Collectives™ on Stack Overflow

how to use angular 1 variables inside the angular 2 component

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related