从指令

问题描述:

将参数传递给父控制器方法如何从指令将参数传递给控制器​​的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但尽管如此,调用控制器方法可能不那么重要。

+0

[从AngularJS中的指令调用父控制器的方法]的可能的副本(http://*.com/questions/15991137/calling-method-of-parent-controller-from-a-directive-in-angularjs ) – Stewie

+0

小提琴总是加速解决问题的过程,但是你的问题是将参数传递给你的'end'函数,还是根本不适合你? – Nix

+0

@Nix,这确实是我的问题。可能的重复给了我答案。 – Pickels

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}); 
     }); 
    } 
    } 
}); 

This is a really good explanation on how to do this also. There are a couple more techniques there too!

另外如果你想了解示波器插值,using the &, view this