angularjs1.5 组件内用函数向外传值的实例

 更新时间:2018年09月30日 09:31:18   作者:yzbben  
今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

组件:

.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 组件内用函数向外传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • angular中radio单选的问题解决demo

    angular中radio单选的问题解决demo

    这篇文章主要为大家介绍了angular中radio单选的问题解决demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 详解angular2如何手动点击特定元素上的点击事件

    详解angular2如何手动点击特定元素上的点击事件

    这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angular 应用技巧总结

    Angular 应用技巧总结

    这篇文章总结了一些Angular的应用技巧,都是在实际项目中应用了的,感觉对于使用Angular还是有一些帮助的,有需要的小伙伴可以参考下
    2016-09-09
  • angular4自定义表单控件[(ngModel)]的实现

    angular4自定义表单控件[(ngModel)]的实现

    这篇文章主要介绍了angular4自定义表单控件[(ngModel)]的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于AngularJs select绑定数字类型的问题

    基于AngularJs select绑定数字类型的问题

    今天小编就为大家分享一篇基于AngularJs select绑定数字类型的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 实例详解angularjs和ajax的结合使用

    实例详解angularjs和ajax的结合使用

    本篇文章给大家介绍angularjs和ajax的结合使用,本文介绍的非常详细,对angularjs和ajax感兴趣的朋友一起参考下吧
    2015-10-10
  • Angular 4依赖注入学习教程之组件服务注入(二)

    Angular 4依赖注入学习教程之组件服务注入(二)

    大家都知道依赖注入式AngularJS的重要特性之一,之前我们已经介绍了关于Angular 4依赖注入基础的内容,下面这篇文章主要给大家介绍了关于Angular 4依赖注入之组件服务注入的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • 实例剖析AngularJS框架中数据的双向绑定运用

    实例剖析AngularJS框架中数据的双向绑定运用

    这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下
    2016-03-03
  • angularjs实现多选框分段全选效果实现

    angularjs实现多选框分段全选效果实现

    这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。到底能简化到什么程度呢,今天我们来看下,一行代码实现控件验证效果,有木有吓尿?
    2014-06-06

最新评论