从控制器的指令中调用函数的最佳方法是什么

Question

只是想知道从控制器到指令函数的最佳通信方式是什么，我在其中一个按钮上单击了 ng-click，但该函数位于指令中，有没有一种方法可以在控制器中调用该函数（位于指令中）。我知道你可以使用作用域进行双重绑定，有没有更好的方法？

干杯

   app.controller('leadsListing', ['$scope', function($scope){
    $scope.filterresultcount = 0;
    $scope.records = [];
    $scope.filtertotal = '';

    $scope.$watch('filtertotal', function(){
        $scope.filterresultcount = parseInt($scope.filtertotal / 20);
    });

    $scope.moreFilterResult = function(){
        if($scope.filterresultcount > 0){
            $scope.filterresultcount--;
        }
        $scope.heyJoe(); // It's in diretive
    };
  }]);

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){
    return {
        scope: {
            names : '@names',
            model : '@model',
            records : '=records',
            filtertotal : '=filtertotal',
            filterresultcount : '=filterresultcount'
        },
        restrict: 'A', 
        replace: true,
        link: function($scope, iElm, iAttrs, controller) {
            $scope.heyJoe()
        }
    }
}

Answer 1

我相信实现这种控制器-->指令通信的最佳方式是使用控制器中的$scope.$broadcast，以及指令的控制器/链接函数中的$scope.$on。

控制器：

app.controller('leadsListing', ['$scope', function($scope){
  // ...

  $scope.moreFilterResult = function(){
      if($scope.filterresultcount > 0){
          $scope.filterresultcount--;
      }
      $scope.$broadcast('joeCalled'); 
  };
}]);

指令：

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){
    return {
        scope: {
            names : '@names',
            model : '@model',
            records : '=records',
            filtertotal : '=filtertotal',
            filterresultcount : '=filterresultcount'
        },
        restrict: 'A', 
        replace: true,
        link: function(scope, iElm, iAttrs, controller) {
            scope.$on('joeCalled', function(){ 
                // Do something...
            });
        });
    };
}

编辑：

创建了此技术的工作示例： http://jsfiddle.net/9p3eyy5h/2/

Answer 2

可以通过在控制器范围内放置一个空对象，使用 '=' 将其绑定到指令的范围，并在指令的链接函数/控制器中将函数附加到它来完成从控制器直接在指令中调用函数，稍后可以由包装控制器调用。

控制器：

app.controller('leadsListing', ['$scope', function($scope){
  // ...

  $scope.directiveFuncs = {};
  $scope.moreFilterResult = function(){
      if($scope.filterresultcount > 0){
        $scope.filterresultcount--;
      }
    $scope.directiveFuncs.heyJoe();
  };
}]);

指令：

app.directive('recordfilter', ['$http', 'filterService', function($http, filterService){
  return {
    scope: {
        names : '@names',
        model : '@model',
        records : '=records',
        filtertotal : '=filtertotal',
        filterresultcount : '=filterresultcount',

        // Binding to the controller's func obj
        funcs: '='
      },
      restrict: 'A', 
      replace: true,
      link: function(scope, iElm, iAttrs, controller) {
        scope.funcs.heyJoe = function(){
          // Do something...
        }
    });
  };
}

HTML：

<div ng-controller="leadsListing">
  <div recordfilter funcs="directiveFuncs"></div>
</div>

然而，我建议使用我的其他方法，因为它可以防止控制器和指令之间的直接依赖关系，因此更加健壮，因此如果指令丢失或更改，它不会引发错误。

工作示例：
http://jsfiddle.net/9pm3zg5s/1