如何使用角2部件内部角1个变量

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

如何可以使用$ scope.sayhello组件内的变量。

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 !!!"; 
    } 
    }); 

说明

在角2，不存在所谓的$scope模型。他们用Class中的简单变量替换它。

我们可以将整个Class视为在Angular 1.x中的controller。我们可以用this.variable_name创建变量，其中Class。 constructor是将在组件中首先调用的函数。所以，我们可以在这里初始化我们所有的变量。

所以，$scope.variable_name在角1.x中是相同的（或可能）作为this.variable_name在角2

Answer 2

其实sayhello属性可以，因为在其相关范围内的已定义的前提下使用您的loginDir指令中。

你可以有一个用例这样的：

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

在你Angular1指令的模板，你将能够使用此功能：

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

我不知道是什么你确实想要做的。这里是相应的plunkr：https://plnkr.co/edit/ribHwk8uSXHRv0JkLlo0?p=preview。

编辑

您可以访问从指示父组件的属性，因为Angular1指令范围内你的指令。用Angular1，你也不能。你唯一能做的就是为你的Angular1指令定义一个参数，该参数对应于父组件的一个属性，并通过引用来更新它。

下面是一个简单

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' 
    }; 
}); 

，并使用该指令在组件的方式：

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' 
     } 
    } 
    }); 

通讯plunkr是在这里：https://plnkr.co/edit/ribHwk8uSXHRv0JkLlo0?p=preview。

希望它可以帮助你， 蒂埃里