从指令
问题描述:
将参数传递给父控制器方法如何从指令将参数传递给控制器的end()
方法?从指令
指令
var fileuploader = function() {
return {
restrict: 'E',
scope: {
onEnd: '&',
},
controller: function ($scope) {
// When upload is done
$scope.onEnd(/* file */);
}
};
}
控制器
module.controller('Ctrl', function ($scope) {
$scope.end = function (file) {
console.log('file', file);
};
});
模板:
<div ng-controller='Ctrl'>
<fileuploader on-end='end()'></fileuploader>
</div>
我也想知道,如果这是一个因为我没有看到在其他地方使用过这种方法。也许下面更棱角?
指令
var fileuploader = function() {
return {
restrict: 'E',
scope: {
onEnd: '=',
},
controller: function ($scope) {
// When upload is done
$scope.file = file;
}
};
}
控制器
module.controller('Ctrl', function ($scope) {
$scope.$watch('file', function (val) {
console.log('file', val);
});
});
模板
<div ng-controller='Ctrl'>
<fileuploader on-end='file'></fileuploader>
</div>
这增加了一些indirec但尽管如此,调用控制器方法可能不那么重要。
答
Aight先生,这里有一个例子,如果道歉我的解释是不是超清晰: http://plnkr.co/edit/3wO3So
查看:
<div ng-controller='fooCtrl'>
<fileuploader directive-end-fn='end(directiveData)'></fileuploader>
</div>
控制器&指令
app.controller('fooCtrl', function($scope) {
/// This end() function sits on the controller it will be passed data from the directive
$scope.end = function (directiveData) {
console.log("I'm in the controller " + directiveData);
};
});
app.directive('fileuploader', function(){
return {
restrict: 'E',
replace: true,
scope: {
/// I bind the end function from the controller to scope.directiveEndFn,
//I'll use it in the link function later
directiveEndFn: '&',
},
/// I take your directive, add an input box as a model (model.input)
template: '<div><input type="text" ng-model="model.input"><div>{{model.input}}</div></div>',
/// Put your logic in the linking function, so it runs all the time.
link: function(scope,element){
/// This could be any event, right now I'm watching the model.input for event changes.
//It fires a callback that allows me to do stuff when changes happen
scope.$watch("model.input", function(myModelValue){
// I use scope.directiveEndFn with an "Object Map",
// I tell it to use the model.input which is now assigned to myModelValue value,
// It's a $watch convention you can read more about, whatever gets "Watched" is
// is the parameter of the callback.
// The object map links myModelValue to DirectiveData
// Look at the view, which passes this information,
// from the directive to the controller - directive-end-fn='end(directiveData)'
scope.directiveEndFn({directiveData: myModelValue});
});
}
}
});
另外如果你想了解示波器插值,using the &, view this。
[从AngularJS中的指令调用父控制器的方法]的可能的副本(http://*.com/questions/15991137/calling-method-of-parent-controller-from-a-directive-in-angularjs ) – Stewie
小提琴总是加速解决问题的过程,但是你的问题是将参数传递给你的'end'函数,还是根本不适合你? – Nix
@Nix,这确实是我的问题。可能的重复给了我答案。 – Pickels