AngularJS组件：在控制器中使用绑定对象

Question

我使用Angular组件（this的第一个示例）。当我在组件中绑定对象时，可以在模板中访问它，但不能在控制器中访问它。

js：

function HeroDetailController() {
  console.log("Here I want to use hero.name: ");
  console.log(hero.name); // I want to use binding object in controller, but doesn't work
}

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  controllerAs: 'ctrl',
  bindings: {
    hero: '='
  }
});

的HTML：

<hero-detail hero="ctrl.hero"></hero-detail>

模板html（在这里有效）：

<span>Name: {{ctrl.hero.name}}</span>

错误：

ReferenceError：未定义英雄

Plunker：https：//plnkr.co/edit/U9CJLs6jgrlsZH6tUdr0

Answer 1

您将bindings在HeroDetailController上下文中获得价值this

function HeroDetailController() {
  var ctrl = this;
  console.log("Here I want to use hero.name: ");
  console.log(ctrl.hero);
}

虽然以上行不通。因为它不会在第一个摘要循环上传递与组件的初始绑定。

为了获得该值，您可以$onInit在组件上使用生命周期值。

function HeroDetailController() {
  var ctrl = this;
  console.log("Here I want to use hero.name: ");
  ctrl.$onInit = function(){
    console.log(ctrl.hero);
  }
}

即使没有，您也可以直接获得价值$onInit。同样，您必须$compileProvider像下面一样更改配置。（它已在1.6+中引入）

.config(function($compileProvider){
  $compileProvider.preAssignBindingsEnabled(true)
});

注意： 理想情况下，您不应该在应用程序中强制执行上述设置，我只是在前面进行了演示。

Demo Plunkr