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自动显示最后更新时间
Mar 15 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vue实现在线学生录入系统
May 30 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
MySQL授权问题总结
2007/05/06 PHP
php防盗链的常用方法小结
2010/07/02 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python递归函数定义与用法示例
2017/06/02 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
业务部经理岗位职责
2014/01/04 职场文书
学习标兵获奖感言
2014/02/20 职场文书
个人公开承诺书
2014/03/28 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2016中秋节广告语
2016/01/28 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python