angular1.x中&绑定的函数如何传参？

最新推荐文章于 2020-10-26 12:19:27 发布

weixin_34393428

最新推荐文章于 2020-10-26 12:19:27 发布

阅读量394

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/huangsuhong/blog/1555031

版权

2019独角兽企业重金招聘Python工程师标准>>>

在用写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父到子

转载于:https://my.oschina.net/huangsuhong/blog/1555031