如何访问 Angularjs 的 v1.5 组件中的属性？

Question

我正在使用 v1.5 组件，它本质上（就我的理解而言）是最佳实践指令的包装器。

有关组件 1.5 版本的更多信息可在此处找到：http://toddmotto.com/exploring-the-angular-1-5-component-method/

我有以下内容：

<span>Correclty showing: {{ data.type }}</span>
<book class="details" type="data.type"></book>

它的组件定义：

angular
.module('app')
.component('book', {
    bindings: {
        type: '='
    },
    template: function($element, $attrs) {
        // Have tried A):
        // console.log($attrs.type); // <- undefined

        // And B):
        $attrs.$observe('type', function(value) {
            console.log(value); // <- undefined
        });

        // But.. C):
        return "This works though {{ book.type }}"; // <- renders
    }
});

A) 和 B) 变体 return undefined。 C) 正确呈现。

有没有办法在return输入模板字符串之前访问模板函数中的属性？

Answer 1

在 1.5 中，templateUrl 现在根据文档进行注入：https://docs.angularjs.org/guide/component. If you use ng-srict-di you will get an error unless you specify the injectables....I'm using ng-annotate 以节省麻烦并保持代码整洁。这是一个示例（在 TypeScript 中）：

  import IRootElementService = angular.IRootElementService;
  import IAttributes = angular.IAttributes;

  angular.module('app').component('book', {

      /*@ngInject*/
      templateUrl($element:IRootElementService, $attrs:IAttributes) {
           // access to the $element or $attrs injectables
      }

  });

或者在 vanilla JS 中没有 ng-annotate:

  angular.module('app').component('book', {    
      templateUrl: ['$element', '$attrs', function($element, $attrs) {
           // access to the $element or $attrs injectables
      }],
  });

如何访问 Angularjs 的 v1.5 组件中的属性？

How to access attributes within Angularjs's v1.5 component?

web-component

angularjs

angularjs-directive