angularjs1.5 组件内用函数向外传值的实例


Posted in Javascript onSeptember 30, 2018

组件:

.component('homeCityListCom',{
  bindings: {
  list: '<',
  cityname:'&'
 },
 controllerAs: 'vm',
 template:
 `
 <div class="cityListBox">
  <span class="title">按拼音首字母选择</span>
  <div class="cityItem flexRowStart" ng-repeat="x in vm.list track by $index">
   <p class="zimu flexColumnCenter">{{x.sortName}}</p>
   <ul class="flexRowStart city">
    <li ng-repeat="c in x.cities"><a href="/#!/home?city_id={{c.cityId}}" rel="external nofollow" ng-click="vm.cityname({name: c.cityName})">{{c.cityName}}</a></li>
   </ul>
  </div>
 </div>`
})

控制器:

.controller('cityListCtrl', ['$scope','$http', function ($scope,$http) {
 let that = this;
 // 将城市名字存在本地
 that.cityName = function(name){
  console.log(123);
  localStorage.setItem('cityName', name);
 }
}])

使用组件:

<home-city-list-com list="cl.cityList" cityname="cl.cityName(name)"></home-city-list-com>

路由设置:

.state('city_list',{
   url:"/city_list",
   templateUrl:'templates/indexTpl/city_list.html',
   controllerAs:'cl',
   controller:'cityListCtrl'
  })

以上这篇angularjs1.5 组件内用函数向外传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 #Javascript
vue-router 手势滑动触发返回功能
Sep 30 #Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
You might like
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
js left,right,mid函数
2008/06/10 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python切片操作深入详解
2018/07/27 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
小学五年级学生评语
2014/04/22 职场文书
建筑工地质量标语
2014/06/12 职场文书
重点工程汇报材料
2014/08/27 职场文书
2014年德育工作总结
2014/11/20 职场文书
慈善募捐倡议书
2015/04/27 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技