在用写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 } }; }])
<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: { 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父到子