搜索框组件开发:

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. 【转发】Cross-thread operation not valid: Control &#39;progressBar1&#39; accessed from a thread other than the thread it was created on

    当您试图从单独的线程更新一个win form时,您将得到如下错误信息:  "Cross-thread operation not valid: Control 'progressBar1' ...

  2. bjfu1299 stl使用

    题目超简单,我写解题报告是因为我的代码用了些STL,使代码很简洁. * * Author : ben */ #include <cstdio> #include <cstdlib&g ...

  3. Context中嵌套&lt;Environment&gt;元素

    环境条目  可以在Context中嵌套<Environment>元素,配置命名的值,这些值作为环境条目资源(Environment Entry Resource),对整个web应用可见.比 ...

  4. bash:command not found

    在linux下执行某一常用命令时,提示类似错误信息:bash:bash:command not found 原因是所执行的命令在当前系统环境变量里找不到路径. 例如:刚安装了openOffice时,执 ...

  5. 201521123028 《Java程序设计》第10周学习总结

    1. 本周学习总结 异常方面,主要是调试的相关内容,断点的使用,常用快捷键(F5(step into) F6(step over,跳过),F7 (step return,跳出)). 多线程: ①.进程 ...

  6. python glob fnmatch 用于文件查找操作

    參考: http://python.jobbole.com/81552/:Python模块学习:glob文件路径查找 http://blog.csdn.net/suiyunonghen/article ...

  7. ThinkAdmin for PHP后台管理系统

    ThinkAdmin for PHP后台管理系统 ThinkAdmin 是一个基于 Thinkphp 5.1.x 开发的后台管理系统,集成后台系统常用功能.基于 ThinkPHP 5.1 基础开发平台 ...

  8. 新疆大学ACM-ICPC程序设计竞赛五月月赛(同步赛) H XOR

    链接:https://www.nowcoder.com/acm/contest/116/H来源:牛客网 题目描述 Once there was a king called XOR, he had a ...

  9. Spring MVC 学习总结(十一)——IDEA+Maven+多模块实现SSM框架集成

    一.SSM概要 与SSH(Struts/Spring/Hibernate/)一样,Spring+SpringMVC+MyBatis也有一个简称SSM,Spring实现业务对象管理,Spring MVC ...

  10. java 流媒体服务器Red5 FQA

    原文链接:http://www.cnblogs.com/zhuzhao/archive/2008/08/12/1265661.html red5 FQA   red5 FQA 引自:http://hi ...