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中不同的组件间传值与通信的方法
本文主要介绍angular在不同的组件中如何进行传值,如何通讯.主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: 子组件创建事件EventEmitter对象,使用@output公开出去: 父组件监听子组件@output出来的方法,然后处理事件. 代码: // child 组件 @Component({ selector: 'app-child',
-
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
本文实例讲述了Angular外部使用js调用Angular控制器中的函数方法或变量.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp" id="myApp"> <head> <meta name="viewport" content="width=device-width" /> <title>Test</
-
Angular2 父子组件数据通信实例
如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架Angular和React开发应用,不可避免地需要开发组件,也就意味着我们需要考虑组件间的数据传递等问题,不过Angular 2已经为我们提供了很好的解决方案. 父组件和子组件 接触过面向对象编程的开发者肯定不会对父子关系陌生,在Angular 2中子组件存在于父组件"体内",并且父子组件可以通过一些渠道进行通讯. 父组件向子组件传入数据 – @Input 当我们着手开始开发一个组件时,第一件想到的应该就是为其传入数据
-
angularjs2中父子组件的数据传递的实例代码
父到子组件之间的数据传递 父组件模板中引用子组件 // father template: ... <child-item [name] = "fatherItemName" > </child-item> //...` 其中"fatherItemName" 为父组件中的属性,[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性 _na
-
angularjs1.5 组件内用函数向外传值的实例
组件: .component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class="cityListBox"> <span class="title">按拼音首字母选择</span> <div class="cityItem flexRowStart&
-
c++中的内联函数inline用法实例
问题描述:类中成员函数缺省默认是内联的,如果在类定义时就在类内给出函数定义,那当然最好.如果在类中未给出成员函数定义,而又想内联该函数的话,那在类外要加上 inline,否则就认为不是内联的.内联函数的inline要加在函数前面,不可以加在声明前面. class A { public:void Foo(int x, int y) { } // 自动地成为内联函数 } //正确写法: // 头文件 class A { public: void Foo(int x, int y); } // 定义文
-
kotlin Standard中的内联函数示例详解
let.with.run.apply.also.takeIf.takeUnless.repeat函数的使用 kotlin Standard.kt文件中,提供了一些内联函数,这些内联函数可以减少代码量,在使代码优美的同时,打打提高开发效率.它们分别为: run.with.let.also.apply let let函数的定义如下: public inline fun <T, R> T.let(block: (T) -> R): R = block(this) 默认当前这个对象作为闭包的it
-
详解Vue组件插槽的使用以及调用组件内的方法
组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像
-
React组件内事件传参实现tab切换的示例代码
本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析
-
Python 内置函数globals()和locals()对比详解
这篇文章主要介绍了Python globals()和locals()对比详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python的两个内置函数,globals()和locals() ,它们提供了基于字典的访问局部和全局变量的方式. globals()是可写的,即,可修改该字典中的键值,可新增和删除键值对. 而locals()是不可修改字典中已存在的键值的,也不能pop移除键值对,但是可以新增键值对. Demo: a = 1 # 定义一个
-
Python如何在main中调用函数内的函数方式
一般在Python中在函数中定义的函数是不能直接调用的,但是如果要用的话怎么办呢? 一般情况下: def a():#第一层函数 def b():#第二层函数 print('打开文件B') b()#第二层中的函数直接调用 结果显示: Traceback (most recent call last): File "C:/Users/rog/Desktop/wenzhang.py", line 4, in <module> b() NameError: name 'b' is
-
vue组件中节流函数的失效的原因和解决方法
今天使用节流函数的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结. 节流函数 浏览器的一些事件,如:resize,scroll,mousemove等.这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕.所以先贤们发明了节流函数,简单版本如下: function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.no
-
PHP函数用法详解【初始化、嵌套、内置函数等】
本文实例讲述了PHP函数用法.分享给大家供大家参考,具体如下: 初始函数 函数:封装一段用于完成特定功能的代码. 通俗理解函数:可以完成魔鬼工作的代码块,就像积木一样,可以反复使用,在使用的时候,拿来即用. 函数定义:1)内置函数(字符串操作函数.数组操作函数)2)自定义函数 函数的基本语法格式 function 函数名([参数1.参数2,......]){ 函数体...... } 函数的定义由一下四部分组成: 关键字function function: 在声明函数时必须使用的关键字: 函数名f
-
vue项目watch内的函数重复触发问题的解决
问题描述: 有两个页面A和B,每个页面里都有一个getList()方法.这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦.为了避免在切换A.B两个界面重复选择参数C的问题,我将参数C存入vuex中,然后在两个页面里都使用watch监听参数C来执行getList()方法.然后发现一个问题,从A页面进入B页面后,在B页面重新选择参数C,A页面的getList()方法竟然也会被执行,反之亦然,从B页面到A页面后,在A页面改变参数C也会执行B页面的getList()方法. 后来发现是使用
随机推荐
- iOS11&iPhoneX适配&Xcode9打包注意事项
- Mybatis中#{}和${}传参的区别及#和$的区别小结
- Python极简代码实现杨辉三角示例代码
- php实现兼容2038年后Unix时间戳转换函数
- ASP高级技巧精选集
- java session出现的错误
- C语言中进程信号集的相关操作函数详解
- 解决 FireFox 下[使用event很麻烦] 的问题.
- Shell常见用法小记
- 微信小程序商品到详情的实现
- Linux 中firewall的使用方法总结
- 使用cookie实现统计访问者登陆次数
- Jquery元素追加和删除的实现方法
- ListView的View回收引起的checkbox状态改变监听等问题解决方案
- Android观察者模式实例分析
- C++编程中删除运算符与相等运算符的使用解析
- Yii2组件之多图上传插件FileInput的详细使用教程
- ASP语法注释
- 详解如何构建Promise队列实现异步函数顺序执行
- Python3.0中普通方法、类方法和静态方法的比较