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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
pymysql的简单封装代码实例
2020/01/08 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
数学教育专业求职信
2014/07/22 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
防汛通知
2015/04/25 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
导游词之太原天龙山
2020/01/02 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python