Question

我有以下Angular组件：

(function () {
    'use strict';

    function myHeader() {
        return {
            restrict: 'E',
            scope: {                
                pageTitle: '@'
            },
            template: '<div class="crumby-title">{{pageTitle}}</div>',
             link: function postlink($scope) {   

                const pageTitle = $scope.pageTitle;

             }
        };
    }

    myHeader.$inject = [];
    angular
        .module('xxx')
        .directive('myHeader', myHeader);
})();

我在html页面中添加它但由于某种原因我发现它在页面上不可见但我可以找到它的检查模式。

这是我的html页面：

<div class="demand page">
    <div id="crumby-title">
        <div class="page-icon">
            <i class="fa fa-line-chart"></i>
        </div>
        <div class="page-title-demand" >
            <my-header page-title="Title!"></my-header>
        </div>
        <div class="bcrumb">
            <a href="/#!/url">Link to page</a>
        </div>
    </div> 
    <div class="my-nav">
    </div>  
    <div id="chart" class="demand-chart">
    </div>

</div>

或许我应该在我的CSS中改变一些东西

@import '../../styles/variables.less';
.my {
    .app__header {
        background-color: #ffffff;
        box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
    }
    .app__inner-content {
        background-color: #ffffff;
    }

    .demand-chart{
        padding-top: 50px;
    }

    #crumby-title {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;

        .page-icon {
            font-size: 20px;
            padding: 14px 18px;
            background: #e7e7e7;
            position: absolute;
        }

        .page-title-demand {
            float: left;
            font-size: 20px;
            font-weight: bold;
            padding: 5px 21px 31px 79px;
            height: 55px;
        }

        .bcrumb {
            float: left;
            top: 29px;
            left: 75px;
            position: absolute;
        }   
    }

    .my-nav {
        border-bottom: 1px solid #e7e7e7;
        padding-top: 10px;
        padding-bottom: 30px;
    }
}

知道为什么组件中的文本在页面上不可见？

Answer 1

这应该有效

dict.fromkeys

页面上看不到角度组件

1 个答案: