在用写directive的过程当中,咱们不免会用到&符号,而angular里有几个经常使用的通讯方式,以下:html
来看一个例子函数
指令代码:spa
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>
模版代码:rest
<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代码修改:code
<my-input icon-style="fa-search" ng-model="phoneNum" placeholder-text="会员卡号/手机/二维码" button-call-back="buttonSearch(phoneNum)" key-call-back="keySearch($event)"> </my-input>
指令代码:修改scopeorm
scope: { searchParam: '=ngModel', placeholderText: '@placeholderText', iconStyle: '@iconStyle', buttonCallBack: '&buttonCallBack', keyCallBack: '&keyCallBack' },
模版代码:htm
<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父到子字符串