指令控制器多个函数调用

Question

嗨我有一个角度js代码，我已经用两个函数创建了指令，现在我想调用控制器函数并从指令函数传递值，但是一个函数正在工作另一个不是，这里是代码

return {
    scope: {
        someCtrlFn: '&callbackFn',
        filterRecords: '&searchResult'
    },
    templateUrl:'public/js/app/directives/views/filter.directive.html',
    link: function(scope, element, attrs) {
        //this function calling to controller function
        scope.callme = function(){
            scope.someCtrlFn();
        };

        //this function not calling function to controller function
        scope.filterData = function (query) {
            scope.filterRecords(query);
        }
    }
}

这里是html代码

<side-filter 
 callback-Fn="ctrl.toggleFilterMenu();"
 search-result="ctrl.compilationParams(params);">
</side-filter>

Answer 1

请改为：

<side-filter callback-Fn="ctrl.toggleFilterMenu" 
     search-result="ctrl.compilationParams">
     </side-filter>

这会传递对函数的引用，而不是在加载时执行函数。

Answer 2

您的代码很好，在此示例中，您可以在指令中调用控制器中的操作，查看与您的代码不同的内容。

  

指令模板有2个按钮test来电$scope.toggleFilterMenu   来自控制器的功能将从控制器＆＃34; 和test2调用返回＆＃34;控制台   来自控制器的$scope.compilationParams函数与param将   从指令＆＃34; 返回＆＃34;控制台。

<强>更新

我们还创建了listener服务来设置和获取控制器和指令之间的服务，这将帮助您获得参数并在带有承诺的指令中使用它们。

＆＃13;

＆＃13;

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

app.controller("ctrl", function($scope, listener) {
  $scope.toggleFilterMenu = function() {
    console.log("console from controller")
  }

  $scope.compilationParams = function(param) {
    listener.set(param)
  }
})

app.service("listener", function($rootScope, $q) {
  this.set = function(param) {
    $rootScope.$broadcast('param', param);
  }

  this.get = function() {
    var deferred = $q.defer();
    $rootScope.$on('param', function(ev, params) {
       deferred.resolve(params);
    });
    return deferred.promise;
  }
})

app.directive("sideFilter", function(listener) {
  return {
    restrict: "E",
    scope: {
      someCtrlFn: '&callbackFn',
      filterRecords: '&searchResult'
    },
    template: '<button ng-click="callme()">test</button> <button ng-click="filterData()">test2</button>',
    link: function(scope, element, attrs) {
      //this function calling to controller function
      scope.callme = function() {
        scope.someCtrlFn();
      };

      //this function not calling function to controller function
      scope.filterData = function() {
        listener.get().then(function(response) {
          console.log('console from directive',response)
        })
        scope.filterRecords();
      }
    }
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <side-filter callback-Fn="toggleFilterMenu();" search-result="compilationParams('123');">
  </side-filter>
</div>

＆＃13;

＆＃13;

＆＃13;