Passare gli argomenti al metodo del controllore padre dalla direttiva

Question

Come passare gli argomenti al metodo end() del controller dalla direttiva?

direttiva

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '&', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.onEnd(/* file */); 
     } 
    }; 
} 

controller

module.controller('Ctrl', function ($scope) { 
    $scope.end = function (file) { 
     console.log('file', file); 
    }; 
}); 

Template:

<div ng-controller='Ctrl'> 
    <fileuploader on-end='end()'></fileuploader> 
</div> 

Mi chiedo anche se questa è la a modo nobile di fare le cose perché non lo vedo usato da nessun'altra parte. Forse il seguente è più angolare?

direttiva

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '=', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.file = file; 
     } 
    }; 
} 

controller

module.controller('Ctrl', function ($scope) { 
    $scope.$watch('file', function (val) { 
     console.log('file', val); 
    }); 
}); 

Template

<div ng-controller='Ctrl'> 
    <fileuploader on-end='file'></fileuploader> 
</div> 

Questo aggiunge alcune indirec tuttavia, è forse meno avanti, quindi chiama un metodo di controllo.

Answer 1

Aight signore, ecco un esempio, si scusa se la mia spiegazione non è super chiaro: http://plnkr.co/edit/3wO3So

Vista:

<div ng-controller='fooCtrl'> 
     <fileuploader directive-end-fn='end(directiveData)'></fileuploader> 
    </div> 

controller & direttiva

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!

Anche se si desidera comprendere l'interpolazione dell'ambito, using the &, view this.