javascript - Angular 组件不会显示

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 访问数据。

请确保您使用的是正确版本的 angular 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>