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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
js简单时间比较的方法
Aug 02 Javascript
js+html制作简单验证码
Feb 16 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue prop传值类型检验方式
Jul 30 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
香妃
2021/03/03 冲泡冲煮
php数字运算验证码的实现代码
2015/07/30 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
初识Node.js
2015/03/20 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python 求10个数的平均数实例
2019/12/16 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
淘宝客服专员岗位职责
2014/04/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
九年级英语教学反思
2016/02/15 职场文书
庭外和解协议书
2016/03/23 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Anaconda配置各版本Pytorch的实现
2021/08/07 Python