角度组件将不会显示

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>