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，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
詳解angular2如何手動點擊特定元素上的點擊事件
這篇文章主要介紹了詳解angular2如何手動點擊特定元素上的點擊事件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
Angular 應用技巧總結
這篇文章總結了一些Angular的應用技巧,都是在實際項目中應用了的,感覺對于使用Angular還是有一些幫助的，有需要的小伙伴可以參考下
2016-09-09
angular4自定義表單控件[(ngModel)]的實現
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
基于AngularJs select綁定數字類型的問題
今天小編就為大家分享一篇基于AngularJs select綁定數字類型的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
實例詳解angularjs和ajax的結合使用
本篇文章給大家介紹angularjs和ajax的結合使用，本文介紹的非常詳細，對angularjs和ajax感興趣的朋友一起參考下吧
2015-10-10
Angular 4依賴注入學習教程之組件服務注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經介紹了關于Angular 4依賴注入基礎的內容，下面這篇文章主要給大家介紹了關于Angular 4依賴注入之組件服務注入的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-06-06
實例剖析AngularJS框架中數據的雙向綁定運用
這篇文章主要介紹了AngularJS框架中數據的雙向綁定運用實例,包括數據綁定中的關鍵函數與監(jiān)聽器觸發(fā)的相關講解,需要的朋友可以參考下
2016-03-03
angularjs實現多選框分段全選效果實現
這篇文章主要為大家介紹了angularjs實現多選框分段全選效果實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
教你用AngularJS框架一行JS代碼實現控件驗證效果
簡單來說Angular.js是google開發(fā)者設計和開發(fā)的一套前端開發(fā)框架，幫助你簡化前端開發(fā)的負擔。到底能簡化到什么程度呢，今天我們來看下，一行代碼實現控件驗證效果，有木有嚇尿？
2014-06-06