Question

我想创建一个包含很多字段和一个按钮的指令，当用户点击按钮时，填充的信息应该能够传递给指令之外的搜索功能。

var app = angular.module('myapp', []);

app.controller("myCtrl", function($scope) {

    $scope.doSearch = function(query) {
        query.order="asc";
        console.log(query); //do api call 
    }
});

app.directive('queryBuilder', function() {
    return {
        restrict: 'E',
        scope: {
            queryFn: '&'
        },
        template: "<button ng-click='directiveClick()'>Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {
          scope.directiveClick = function(){
            var query={name:"bill",age:12}
            scope.queryFn(query);
          }
        }
    }
});

view.html

<div ng-controller="myCtrl">
      <query-builder query-fn="doSearch()"></query-builder>
    </div>

query中的“doSearch()”参数未定义，如何将链接函数内的query对象引入myCtrl？

我想到的另一种方法是使用双向绑定查询变量而不是传递搜索功能。哪种方式更好？

请参阅Plunkr

Answer 1

使指令调用其范围之外的函数的方法是完全有效的。但是，为了使通信正常工作，您需要：

1，使用指令时指定参数名称

scope.directiveClick = function(){
  var query={name:"bill",age:12}
  scope.queryFn({query: query});
}

2，在指令中，当调用函数时，必须传递一个对象，其中键是＃1中的参数名称。

ID,     Name
1,      Carrot Cake
2,      Cheese Cake
3,      Chocolate Cake

Plunker

从指令到控制器的角度传递变量

1 个答案: