搜索框组件开发:

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

angular1.x 组件开发的更多相关文章

  1. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  2. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  3. 基于vue的新组件开发

    前天完成了一个新组件的开发,做的过程也是各种遇到问题,彻底弄懂了slot,巩固了一些flex布局和jquery的知识,比起自己第一次做组件开发,现在已经是能够下手做,遇到问题解决问题,还算有进步. 但 ...

  4. winRT Com组件开发流程总结

    winRT Com组件开发: 1.编辑idl文件,winRT COM的idl文件与win32的idl文件有差异,如下: interface ItestWinRTClass; runtimeclass ...

  5. [js开源组件开发]localStorage-cache本地存储的缓存管理

    localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 ...

  6. 【2015上半年总结】js开源组件开发系列索引

    js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...

  7. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  8. [js开源组件开发]数字或金额千分位格式化组件

    数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...

  9. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

随机推荐

  1. Python9-列表-day4

    列表list 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘a ...

  2. [转]pickle python数据存储

    python的pickle模块实现了基本的数据序列和反序列化.通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储:通过pickle模块的反序列化操作,我们能够从文件 ...

  3. 北京师范大学第十五届ACM决赛-重现赛

    Another Server 时间限制:1秒 空间限制:262144K 题目描述 何老师某天在机房里搞事情的时候,发现机房里有n台服务器,从1到n标号,同时有2n-2条网线,从1到2n-2标号,其中第 ...

  4. HDU-1030 Delta-wave ,暴力贪心!

    Delta-wave 题意:用图中所示的数字填满这个三角形,求n到m的最短路径,也就是最少通过几条边. 思路:简单贪心就可以了,本人是先将每一层的左右端点用结构体存起来,然后分奇偶判断. 这题必须理清 ...

  5. rabbitmq php 学习

    参考文档:http://www.cnblogs.com/phpinfo/p/4104551...http://blog.csdn.net/historyasamirror/ar... 依赖包安装 yu ...

  6. vue v-dialogDrag: 弹窗拖拽

    Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.jsPropupLay ...

  7. Unity3D for iOS初级教程:Part 1/3

    转自Unity 3d for ios 这篇文章还可以在这里找到 英语 Learn how to use Unity to make a simple 3D iOS game! 这篇教材是来自教程团队成 ...

  8. HDU——1242Rescue(BFS+优先队列求点图最短路)

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  9. JS return false 与 return true

    在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符 ...

  10. Selenium之Web页面滚动条滚操作

    //移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 ((JavascriptExecutor) driver).executeScript("arguments[0].scr ...