在用写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',
iconStyle: '@iconStyle',
buttonCallBack: '&buttonCallBack',
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父到子