將對象傳遞給Angular指令的'＆'父范圍函數

Question

如何將對象傳遞給Angular（Angular 1.4.8） &符范圍綁定指令？

我從文檔中了解到，在回調函數中需要對命名參數進行排序的鍵分解，並且父作用域將這些名稱用作args。 這樣的答案給出了期望&功能的有用示例。 當在父控制器函數調用上顯式命名參數時，我可以使其工作。

但是，我正在使用&通過工廠執行操作。 父控制器對參數一無所知，只是將回調參數交給dataFactory，該dataFactory需要基於操作的各種鍵/值。

承諾在工廠解決后，父范圍將使用返回的數據進行更新。

因此，我需要一個具有n個鍵/值對而不是命名參數的對象，因為它會根據每個配置的操作而有所不同。 這可能嗎？

我所看到的最接近的方法是將$ parse注入link函數中，該函數不能回答我的問題，但卻是我正在尋找的解決方法。 這個未解決的問題聽起來完全符合我的需求。

另外，我正在嘗試避免對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調用中定義的對象中$scope.callAction 。 在您的情況下，您希望將更多內容放入傳遞的對象中：

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

使它適合您的需求，然后在外部控制器中使用params ，它將是此段上params的對象的副本。

告訴您，這不是您的要求。

將對象傳遞給Angular指令的'＆'父范圍函數

問題描述

1 個解決方案

解決方案1
1 已采納 2017-11-07 18:09:20

將對象傳遞給Angular指令的&#39;＆&#39;父范圍函數

問題描述

1 個解決方案

解決方案1 1 已采納 2017-11-07 18:09:20

將對象傳遞給Angular指令的'＆'父范圍函數

解決方案1
1 已采納 2017-11-07 18:09:20