在angularjs和ionic-v1中的一个公共标题栏中仅显示一个图标

在AngularJS和Ionic-v1中，可以通过自定义指令来实现一个公共标题栏，并在其中仅显示一个图标。以下是一个完善且全面的答案：

在AngularJS中，可以使用自定义指令来创建一个公共标题栏组件。首先，创建一个名为header的指令，然后在指令的模板中定义标题栏的HTML结构。在这个模板中，可以使用ng-show指令来控制图标的显示与隐藏。

angular.module('myApp', [])
  .directive('header', function() {
    return {
      restrict: 'E',
      template: '<div class="header">' +
                  '<i class="icon" ng-show="showIcon"></i>' +
                '</div>',
      scope: {
        showIcon: '='
      }
    };
  });

在上述代码中，restrict: 'E'表示这是一个元素级别的指令，template定义了标题栏的HTML结构，scope用于指定指令的作用域。showIcon是一个双向绑定的属性，用于控制图标的显示与隐藏。

接下来，在使用该指令的地方，可以通过传递一个布尔值给show-icon属性来控制图标的显示与隐藏。

<header show-icon="true"></header>

以上代码中，show-icon="true"表示将showIcon属性设置为true，从而显示图标。

在Ionic-v1中，可以使用类似的方式来创建一个公共标题栏组件。首先，创建一个名为ionHeader的指令，然后在指令的模板中定义标题栏的HTML结构。同样地，可以使用ng-show指令来控制图标的显示与隐藏。

angular.module('myApp', ['ionic'])
  .directive('ionHeader', function() {
    return {
      restrict: 'E',
      template: '<ion-header-bar class="bar-stable">' +
                  '<i class="icon" ng-show="showIcon"></i>' +
                '</ion-header-bar>',
      scope: {
        showIcon: '='
      }
    };
  });

在上述代码中，restrict: 'E'表示这是一个元素级别的指令，template定义了标题栏的HTML结构，scope用于指定指令的作用域。showIcon是一个双向绑定的属性，用于控制图标的显示与隐藏。

接下来，在使用该指令的地方，可以通过传递一个布尔值给show-icon属性来控制图标的显示与隐藏。

<ion-header show-icon="true"></ion-header>

以上代码中，show-icon="true"表示将showIcon属性设置为true，从而显示图标。

总结起来，在AngularJS和Ionic-v1中，可以通过自定义指令来实现一个公共标题栏，并在其中仅显示一个图标。通过控制指令中的属性，可以灵活地控制图标的显示与隐藏。