1

登录.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}}

4

2 回答 2

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 。

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

于 2016-01-21T09:31:58.963 回答
2 
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视为controllerAngular 1.x中的 a。我们可以this.variable_name在 a 中使用 with创建变量Class。constructor是将在组件中首先调用的函数。所以，我们可以在这里初始化我们所有的变量。

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

于 2016-01-21T09:19:46.587 回答