angular1.x 组件开发

搜索框组件开发：

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.效果图