angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例
組件:
.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>
路由設(shè)置:
.state('city_list',{
url:"/city_list",
templateUrl:'templates/indexTpl/city_list.html',
controllerAs:'cl',
controller:'cityListCtrl'
})
以上這篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件
這篇文章主要介紹了詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
基于AngularJs select綁定數(shù)字類型的問題
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
實(shí)例詳解angularjs和ajax的結(jié)合使用
本篇文章給大家介紹angularjs和ajax的結(jié)合使用,本文介紹的非常詳細(xì),對(duì)angularjs和ajax感興趣的朋友一起參考下吧2015-10-10
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入(二)
大家都知道依賴注入式AngularJS的重要特性之一,之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06
實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
這篇文章主要介紹了AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用實(shí)例,包括數(shù)據(jù)綁定中的關(guān)鍵函數(shù)與監(jiān)聽器觸發(fā)的相關(guān)講解,需要的朋友可以參考下2016-03-03
angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)
這篇文章主要為大家介紹了angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
簡單來說Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架,幫助你簡化前端開發(fā)的負(fù)擔(dān)。到底能簡化到什么程度呢,今天我們來看下,一行代碼實(shí)現(xiàn)控件驗(yàn)證效果,有木有嚇尿?2014-06-06

