如何将对象传递给 Angular (Angular 1.4.8) & ＆ 范围绑定(bind)指令？
我从 docs 了解到回调函数中存在某种需要命名参数的键解构，并且父作用域使用这些名称作为参数。 This SO answer给出了预期的 & 功能的有用示例。当在父 Controller 函数调用上显式命名参数时，我可以让它工作。
但是，我使用 & 通过工厂执行操作。父 Controller 对参数一无所知，只是将回调参数传递给 dataFactory，该 dataFactory 需要基于操作的不同键/值。
一旦工厂上的 promise 得到解决，父作用域就会使用返回的数据进行更新。
因此，我需要一个具有 n 个键/值对的对象，而不是命名参数，因为它会根据每个配置的操作而有所不同。这可能吗？
我见过的最接近的是 inject $parse into the link function ，这并没有回答我的问题，但却是我正在寻找的解决方法。 This unanswered question听起来正是我需要的。
此外，我试图避免对 JSON 进行编码/解码，并且如果可能的话，我也希望避免广播。为了简洁起见，代码被精简。谢谢...
相关子指令代码
function featureAction(){
return {
scope: true,
bindToController: {
actionConfig: "=",
actionName: "=",
callAction: "&"
},
restrict: 'EA',
controllerAs: "vm",
link: updateButtonParams,
controller: FeatureActionController
};
}
DOM 上的子处理程序
/***** navItem is from an ng-repeat,
which is where the variable configuration params come from *****/
ng-click="vm.takeAction(navItem)"
相关子 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);
}
相关父 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); });
}
最佳答案
我认为下面的示例应该足以让您开始弄清楚您的问题:
<!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 调用指示。该指令期望外部 Controller 使用 call-action 传入这些函数。 <inner> 上的属性标签。
当您单击 inner 内的按钮时它调用函数 $scope.doSomething 的指令这又调用外部 Controller 函数 handleAction1或handleAction2 。它还传递一组参数 val1和params :
$scope.callAction({val1: 1, params: obj});
在模板中，您指定要将哪些参数传递到外部 Controller 函数中:
call-action="handleAction1(params)"
或
call-action="handleAction2(params, val)"
然后，Angular 使用这些参数名称来查找您在调用 $scope.callAction 时发送的对象。 .
如果您需要将其他参数传递到外部 Controller 函数中，则只需将 then 添加到调用 $scope.callAction 中定义的对象中即可。 。在您的情况下，您希望将更多内容放入您传入的对象中:
var obj = {a:1,b:2,c:3}; // <-- Build your params here
使其满足您的需求，然后在您的外部 Controller 中您将接受 params它将是本段上方定义的对象的副本。
如果这不是您要问的，请告诉我。
关于javascript - 将对象传递给 Angular 指令的 '&' 父作用域函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47164198/