最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 22:06:48
文档

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

angularjs1.5 组件内用函数向外传值的实例:组件: .component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class=cityListBox> <span class=title>按拼音首字母选择&l
推荐度:
导读angularjs1.5 组件内用函数向外传值的实例:组件: .component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class=cityListBox> <span class=title>按拼音首字母选择&l


组件:

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

文档

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

angularjs1.5 组件内用函数向外传值的实例:组件: .component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class=cityListBox> <span class=title>按拼音首字母选择&l
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top