如何使用角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。

希望它可以幫助你， 蒂埃裏