Question

只是想知道从控制器到指令功能的最佳通信方式是什么，我已经点击其中一个按钮，但函数位于指令中，有没有办法可以调用控制器内的功能（位于指令中）。我知道你可以在范围内应用双重绑定，有没有更好的方法呢？

干杯

   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

我相信实现这种控制器的最佳方式 - ＆gt;指令通信是使用$ 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

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

2 个答案: