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

<强>解释

在Angular 2中，没有名为$scope的模型。他们用Class中的简单变量替换它。

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

因此，Angular 1.x中的$scope.variable_name与Angular 2中的this.variable_name相同（或可能）。

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。

希望它可以帮到你，亨利

如何在角度2分量内使用角度1变量

2 个答案: