将对象传递给 Angular 指令的 '&' 父作用域函数

Question

如何将对象传递给 Angular 的 (Angular 1.4.8) & & 范围绑定指令？

我从 docs that there is a key-destructuring of sorts that needs named params in the callback function, and the parent scope uses these names as args. This SO answer 中了解到，给出了预期 & 功能的有用示例。当在父控制器函数调用上显式命名参数时，我可以让它工作。

但是，我正在使用 & 通过工厂执行操作。父控制器对参数一无所知，只是将回调参数传递给数据工厂，数据工厂需要基于操作的不同键/值。

一旦对工厂的承诺得到解决，父作用域就会更新为返回的数据。

因此，我需要一个具有 n 个键/值对的对象，而不是命名参数，因为它会根据每个配置的操作而有所不同。这可能吗？

我所看到的最接近的是 , which does not answer my question but is the sort of work-around that I am looking for. This unanswered question 听起来完全符合我的需要。

此外，我正在努力避免 encoding/decoding JSON，如果可能的话，我也想避免 broadcast。为简洁起见，代码被精简了。谢谢...

Relevant Child Directive Code

function featureAction(){
    return {
        scope: true,
        bindToController: {
            actionConfig: "=",
            actionName: "=",
            callAction: "&"
        },
        restrict: 'EA',
        controllerAs: "vm",
        link: updateButtonParams,
        controller: FeatureActionController
    };
}

Child handler on the DOM

 /***** navItem is from an ng-repeat, 
        which is where the variable configuration params come from *****/

ng-click="vm.takeAction(navItem)"

Relevant Child Controller

function FeatureActionController(modalService){
    var vm = this;
    vm.takeAction = takeAction;

    function _callAction(params){
        var obj = params || {};
        vm.callAction({params: obj});  // BROKEN HERE --> TRYING
                                       //TO SEND OBJ PARAMS
    }

    function executeOnUserConfirmation(func, config){
    return vm.userConfirmation().result.then(function(response){ func(response, config); }, logDismissal);
}

function generateTasks(resp, params){
    params.example_param_1 = vm.add_example_param_to_decorate_here;
    _callAction(params);
}

function takeAction(params){
    var func = generateTasks; 
    executeOnUserConfirmation(func, params);
}

Relevent Parent Controller

function callAction(params){
        // logs undefined -- works if I switch to naming params as strings
        console.log("INCOMING PARAMS FROM CHILD CONTROLLER", params) 
        executeAction(params);   
    }

    function executeAction(params){
        dataService.executeAction(params).then(function(data){ 
            updateRecordsDisplay(data); });
    }

Answer 1

我认为下面的示例应该可以让您充分了解您的问题：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Angular Callback</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.var1 = 1;

      $scope.handleAction1 = function(params) {
        console.log('handleAction1 ------------------------------');
        console.log('params', params);
      }

      $scope.handleAction2 = function(params, val1) {
        console.log('handleAction2 ------------------------------');
        console.log('params', params);
        console.log('val1', val1);
      }

    });


    myApp.controller('innerController', innerController);
    innerController.$inject = ['$scope'];
    function innerController($scope) {
      $scope.doSomething = doSomething;

      function doSomething() {
        console.log('doSomething()');
        var obj = {a:1,b:2,c:3}; // <-- Build your params here
        $scope.callAction({val1: 1, params: obj});
      }
    }

    myApp.directive('inner', innerDirective );
    function innerDirective() {
      return {
        'restrict': 'E',
        'template': '{{label}}: <button ng-click="doSomething()">Do Something</button><br/>',
        'controller': 'innerController',
        'scope': {
          callAction: '&',
          label: '@'
        }
      };
    }
    </script>
  </head>
  <body ng-controller="appController">
    <inner label="One Param" call-action="handleAction1(params)"></inner>
    <inner label="Two Params" call-action="handleAction2(params, val)"></inner>
  </body>
</html>

在 appController 中，我有两个函数将由 inner 指令调用。该指令期望外部控制器使用 <inner> 标记上的 call-action 属性传递这些函数。

当您单击 inner 指令中的按钮时，它会调用函数 $scope.doSomething，这又会调用外部控制器函数 handleAction1 或 handleAction2。它还传递一组参数 val1 和 params:

$scope.callAction({val1: 1, params: obj});

在模板中指定要将哪些参数传递给外部控制器函数：

call-action="handleAction1(params)"

或

call-action="handleAction2(params, val)"

Angular 然后使用这些参数名称来查看您调用 $scope.callAction.

时发送的对象

如果您需要将其他参数传递到外部控制器函数中，则只需将其添加到 $scope.callAction 调用中定义的对象中。在您的情况下，您可能希望将更多内容放入您传入的对象中：

var obj = {a:1,b:2,c:3}; // <-- Build your params here

使其符合您的需要，然后在您的外部控制器中您将接受 params，它将是本段上方定义的对象的副本。

这不是你要问的，请告诉我。

将对象传递给 Angular 指令的 '&' 父作用域函数

Pass object to Angular directive's '&' parent scope function

javascript

angularjs

angular-directive

angular-directive-link