angular1.x 组件开发
2023-09-11 14:15:30 时间
搜索框组件开发:
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.效果图
相关文章
- 掌握软件组件/单元测试中的这些术语,你就算正式入门了
- Vue 组件开发
- React 组件开发注意事项
- 前端 组件化开发/模块化开发
- 上传文件组件开发的一些思考
- SpringMvc学习-2-Spring MVC 的核心组件
- Android组件化开发——从零开始教你分析项目需求并实现
- Android开发工程师文集-提示框,菜单,数据存储,组件篇
- Android开发工程师文集-提示框,菜单,数据存储,组件篇
- 微信 小程序组件 分享按钮
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA)
- SwiftUI iOS 开源组件之 按压效果button(教程含源码)
- SwiftUI 精品组件之手机版多功能代码编辑支持语法高亮与行号(教程含源码)
- macOS SwiftUI 开发教程之 如何打开URL网页链接 Link组件
- 鸿蒙组件包之 ohos.accessibility.ability (HarmonyOS鸿蒙开发基础知识)
- vue组件---动态组件之多标签页面
- android 快速开发框架,基于组件化的MVP结构
- VUE3实用组件开发合集一:数字滚动组件
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- 怎么在组件内部判断出是否插入了slot
- Vue组件开发实例(详细注释)
- 【Unity3D日常开发】(二)实现角色移动行走之Transform、Rigidbody、CharacterController组件
- 【ROS理论与实践】第4讲:ROS常用组件工具
- React函数式组件值之useContext()和useReducer()