Question

我想将一些html作为一个组件展示，因为我没有操纵DOM。

作为一个指令，它工作正常，但作为一个组件，它没有。我以前做过组件没有问题，只是看不出这里的问题。如果我在组件代码和指令中注释，它就不起作用。

知道我做错了吗？

(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;
    }
})();

Answer 1

这是工作代码，很可能你没有使用vm.values来访问数据。

请确保您使用的是正确版本的角度js~1.5

(function(angular) {
angular.module('x.y.z', [])
    .component('triangularStatus', {
        bindings: {
            value: '=',
            dimensions:'=?'
        },
         template: '{{vm.value}} <br/> {{vm.dimensions}}' ,
        controller: TriangularStatusController,
        controllerAs: 'vm'
     });
   TriangularStatusController.$inject = [];
    function TriangularStatusController() {
       
    }
})(window.angular);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app = "x.y.z"> 
<triangular-status  value="24" dimensions="348"></triangular-status>
</div>

Answer 2

使用bindings，组件的定义并不直接等同于使用scope的指令定义，即使两者都定义为使用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 （最有可能？）或您的控制器功能依赖于尝试访问您的值，就好像它们在$scope上一样。要确认这一点，您可能会注意到您的javascript控制台中记录了错误，这些错误将帮助您将其归零。

Answer 3

我认为唯一的问题是，你错过了括号： angular.module（＆＃39; X.Y.Z＆＃39;）改成 angular.module（＆＃39; x.y.z＆＃39;，[]）

https://docs.angularjs.org/api/ng/function/angular.module

正如评论中提到的，我需要澄清一下，问题可能是你的JS文件是如何排序或捆绑的，稍后执行的其他一些JS文件会覆盖这个模块，因此你不会看到任何标记呈现。

Angular组件不会显示

3 个答案: