web-dev-qa-db-ja.com

Angularjsのv1.5コンポーネント内の属性にアクセスするにはどうすればよいですか？

私は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)バリエーションはundefinedを返します。 C)正しくレンダリングされます。

テンプレート文字列を返す前に、テンプレート関数内の属性にアクセスする方法はありますか？

angularjsangularjs-directiveweb-component
10
Chris

1.5では、templateUrlはドキュメントに従って注射剤を受け取るようになりました： https://docs.angularjs.org/guide/component 。 ng-srict-di を使用する場合、注射剤を指定しない限りエラーが発生します....私は 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
      }

  });

またはVanillaJSでng-annotateなし：

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