搜索框组件开发：

1.注册组件

app.js

angular.module("myApp",[])
.component("nameSearch",{templateUrl:"../components/nameSearch.html",template: "",controller:function ($scope,$rootScope) {// 搜索框内容$scope.searchContent = '';// 点击搜索操作$scope.query = function(val) {// 广播$rootScope.$broadcast("searchContent.updated", val);}}
});

2.创建组件

components/nameSearch.html

<!-- 姓名模糊查询组件(搜索框) -->
<div class="bar bar-header item-input-inset"><label class="item-input-wrapper"><i class="icon ion-ios-search placeholder-icon"></i><input ng-model="searchContent" type="search" placeholder="请输入矫正人员姓名"></label><button ng-click="query(searchContent)" class="button button-positive">搜索</button>
</div><style>.item-input-inset{/**/}
</style>

3.父页面调用

templates/tab-alarm.html

<ion-view hide-nav-bar="true"><ion-content><!-- 搜索框 --><name-search></name-search></ion-content>
</ion-view>

4.父页面接收 组件传参

.controller('AlarmCtrl', ['$scope',function($scope) {/*** 获取搜索框内容*/$scope.$on("searchContent.updated", function(event, data){console.log(data);});
}])

5.效果图