如何在angularjs中将对象传递给组件的模板函数

Question

我有一个angularjs 1.7.x项目，我使用一个组件在网站的页面中添加图像和链接，如下所示：

angular.module('app', [])
.controller('MainCtrl', function MainCtrl() {
  this.book = {
    id: 12,
    name: 'Spawn'
  };
})
.component('smallBook', {
  bindings: {
    book: '<'
  },
  template: function($element, $attrs) {
      // here where is I need to use passed book object ...
      console.log("this.book", this.book); // book is undefined !???
      return '<span>Name: {{$ctrl.book.name}}</span>';
    }
});

并在这样的视图中使用该组件：

<div ng-controller="MainCtrl as ctrl">
   <b>Book</b>
   <br>
   <small-book book="ctrl.book"></small-book>
</div>

您可以在plunker

中看到此示例代码

现在，我需要访问组件模板中使用的传递的对象，但是我希望在模板编译之前使用它。我在模板函数中使用了$attrs，但它将对象的值作为字符串！帮助我解决此问题或使用另一种方式在编译之前并根据传递的对象来注入模板。