6

DOM を操作していないので、コンポーネントとして表示したい html があります。

ディレクティブとしては正常に機能しますが、コンポーネントとしては機能しません。以前に問題なくコンポーネントを作成しましたが、ここで何が問題なのかわかりません。コンポーネント コードでコメントアウトし、ディレクティブをアウトすると、機能しません。

私が何を間違えたのか分かりますか？

(function() {
"use strict";

angular
    .module('x.y.z')


    // .component('triangularStatus', {
    //     bindings: {
    //         value: '=',
    //         dimension: '=?'
    //     },
    //     templateUrl: '/path/to/triangular-status.html',
    //     controller: TriangularStatusController,
    //     controllerAs: 'vm'
    // });


    .directive('triangularStatus', triangularStatus);

    function triangularStatus() {
        var directive = {
            scope: {
                value: '=',
                dimension: '=?'
            },
            replace: true,
            templateUrl: '/path/to/triangular-status.html',
            controller: TriangularStatusController,
            controllerAs: 'vm',
        };
        return directive;
    }



    TriangularStatusController.$inject = [];
    function TriangularStatusController() {
        var vm = this;
    }
})();
4

3 に答える 3

1

コンポーネントの定義である usingbindingsは、ディレクティブの定義である using と直接同等ではありませんがscope、どちらも use と定義されていますcontrollerAs。これは、コンポーネントがコントローラーに直接バインドされ、ディレクティブが$scope(既定で) にバインドされるためです。

以下のスニペットでコードを使用しましたが、コンポーネントとディレクティブを一緒に使用できるようにわずかに変更されています。bindToController:trueまた、属性値を ではなくコントローラーに直接バインドするコンポーネントのように動作するディレクティブを示すために、 を使用する追加のディレクティブも追加しました$scope。

$scopeまた、バインドされた属性値を で検索し、続いてvm(ControllerAs) で検索して、バインドされた属性値を表示しようとする非常に基本的な共有テンプレートも使用しました。

(function() {
  "use strict";

  var templateBody = '<h2>$scope</h2>' +
    '<p>value: {{value}}</p><p>dimension: {{dimension}}</p>' +
    '<h2>vm</h2>' +
    '<p>vm.value: {{vm.value}}</p><p>vm.dimension: {{vm.dimension}}</p>';

  angular
    .module('x.y.z', [])


  .component('triangularStatusComponent', {
    bindings: {
      value: '=',
      dimension: '=?'
    },
    template: '<div><h1>Triangular Status Component</h1>' + templateBody + '</div>',
    controller: TriangularStatusController,
    controllerAs: 'vm'
  })


  .directive('triangularStatusDirective', triangularStatusDirective)
  .directive('triangularStatusDirectiveBound', triangularStatusDirectiveBound);

  function triangularStatusDirective() {
    var directive = {
      scope: {
        value: '=',
        dimension: '=?'
      },
      replace: true,
      template: '<div><h1>Triangular Status Directive</h1>' + templateBody + '</div>',
      controller: TriangularStatusController,
      controllerAs: 'vm',
    };
    return directive;
  }

  function triangularStatusDirectiveBound() {
    //https://docs.angularjs.org/api/ng/service/$compile#-bindtocontroller-
    var directive = {
      scope: {
        value: '=',
        dimension: '=?'
      },
      bindToController: true,
      replace: true,
      template: '<div><h1>Triangular Status Directive Bound</h1>' + templateBody + '</div>',
      controller: TriangularStatusController,
      controllerAs: 'vm',
    };
    return directive;
  }

  TriangularStatusController.$inject = [];

  function TriangularStatusController() {
    var vm = this;
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="x.y.z">
  <triangular-status-component value="'componentValue'" dimension="'componentDimension'">
  </triangular-status-component>
  <hr>
  <triangular-status-directive value="'directiveValue'" dimension="'directiveDimension'">
  </triangular-status-directive>
  <hr>
  <triangular-status-directive-bound value="'directiveValueBound'" dimension="'directiveDimensionBound'">
  </triangular-status-directive-bound>
</div>

コードが値が にバインドされているディレクティブとして機能するが$scope、値がコントローラーにバインドされているコンポーネントとしては機能しないことがわかっている場合は、テンプレート html (おそらく?) またはコントローラーのいずれかを想定します。関数は、あたかも on であるかのように、値にアクセスしようとすることに依存しています$scope。これを確認するために、JavaScript コンソールにエラーが記録されていることに気付くかもしれません。

于 2016-09-23T15:42:46.323 に答える