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}}

Answer 1

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.

Answer 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