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 04 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
利用php生成验证码
2017/02/23 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Javasipt:操作radio标签详解
2013/12/30 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
跟老齐学Python之重回函数
2014/10/10 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
和平主题的演讲稿
2014/01/12 职场文书
英语简历自我评价
2014/01/26 职场文书
年度考核个人总结
2015/03/06 职场文书
致青春观后感
2015/06/09 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
一篇文章带你复习java知识点
2021/06/28 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript