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 异步页面查询实现代码(asp.net)
May 26 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
全面解析JavaScript Module模式
Jul 24 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
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
浅谈php命令行用法
2015/02/04 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python-split()函数实例用法讲解
2020/12/18 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
和睦家庭事迹
2014/05/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
Python代码实现双链表
2022/05/25 Python