angular1.x中&绑定的函数如何传参?
发布时间:2020-12-17 08:41:32 所属栏目:安全 来源:网络整理
导读:在用写directive的过程中,我们难免会用到符号,而angular里有几个常用的通信方式,如下: :函数 =:双向绑定 @:字符串 来看一个例子 指令代码: angular.module('directTest').directive('myInput',['$timeout',function ($timeout) { return { restrict:
在用写directive的过程中,我们难免会用到&符号,而angular里有几个常用的通信方式,如下:
来看一个例子 指令代码: angular.module('directTest').directive('myInput',['$timeout',function ($timeout) { return { restrict: 'E',scope: { placeholderText: '@placeholderText',iconStyle: '@iconStyle',buttonCallBack: '&buttonCallBack',keyCallBack: '&keyCallBack' },templateUrl: window.tmplVersionPlus('views/my-input.client.view.html'),replace: true,link: function (scope) { //....dosomething } }; }]) html代码: <my-input icon-style="fa-search" placeholder-text="会员卡号/手机/二维码" button-call-back="buttonSearch(phoneNum)" key-call-back="keySearch($event)"> </my-input> 模版代码: <form class="form-inline"> <input ng-keyup="keyCallBack($event)" placeholder="{{placeholderText}}" ng-model="searchParam" ng-model-options="{update:default}" type="text" class="form-control"> <span ng-click="buttonCallBack(searchParam)"> <i class="fa fa-plus" ng-class="iconStyle ? iconStyle : 'fa-plus' "></i> </span> </div> </form> 我们想点击icon的时候执行buttonCallBack这个函数,并将input的值,即searchParam传回指令里,当作参数,然后controller就可以执行时就可以拿到这个参数里。 但是,这是不可以的。 如前边所示,通信方式有三种,而传参,是不可以的。 解决方案:将参数当作双向绑定的值=,然后controller就可以拿到了。 html代码修改: <my-input icon-style="fa-search" ng-model="phoneNum" placeholder-text="会员卡号/手机/二维码" button-call-back="buttonSearch(phoneNum)" key-call-back="keySearch($event)"> </my-input> 指令代码:修改scope scope: { searchParam: '=ngModel',placeholderText: '@placeholderText',keyCallBack: '&keyCallBack' }, 模版代码: <span ng-click="buttonCallBack()"> //这里不用传参 <i class="fa fa-plus" ng-class="iconStyle ? iconStyle : 'fa-plus' "></i> </span> 似乎还有一个$event,能省则省,直接在link里做处理,不如不行还是传一下吧,可以将searchParam修改为对象 link: function (scope) { //....dosomething scope.keySearch = function($event) { if ( $event.keyCode === 13 ) { if ( scope.keyCallBack ) { scope.keyCallBack(); } } }; } 传参还有$emit()子到父 $broadcast父到子 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读