[英]Pass object to Angular directive's '&' parent scope function
如何将对象传递给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); });
}
我认为以下示例应该给您足够的起点来弄清楚您的问题:
<!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
的对象的副本。
告诉您,这不是您的要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.