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绑定到指令模板html

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

这里有小提琴演奏更多Running js fiddle for this demo

Answer 2

由于您将指令限制为仅仅是一个元素，我宁愿创建一个组件，它已经允许您以$ctrl和正确的绑定访问控制器。像这样：

(function () {
'use strict';
  var HeaderComponent = {
  bindings: {
    pageTitle: '@'
  },
  template: '<div>{{$ctrl.pageTitle}}</div>'
}

 angular.module('myapp', [])
  .component('myHeader', HeaderComponent);
})();

将组件导入AngularJS中的页面

2 个答案: