javascript - 在 AngularJS 中将组件导入页面

Question

我创建了一个简单的 AngularJS 组件，其标题作为参数，如下所示:

(function () {
    'use strict';

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

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

我想在 html 页面中使用该组件，并且我尝试像这样添加它:

<div class="sample page">
    <my-header page-title="TITLE!"></my-header>
</div>

我可以在检查模式下看到该组件，但它没有出现在页面上，也没有错误。我错过了什么？

Answer 1

您尚未将 pageTitle 绑定(bind)到指令模板 html

指令 html 应该是这样的 - template: '<div class="crumby-title">{{pageTitle}}</div>',

这里正在运行 fiddle 来玩更多Running js fiddle for this demo