Przekaż argumenty do metody kontrolera nadrzędnego z dyrektywy

Question

Jak przekazać argumenty do metody end() kontrolera z dyrektywy?

dyrektywa

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

Szablon:

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

Zastanawiam się również, czy jest to A ngularny sposób robienia rzeczy, ponieważ nie widzę tego używanego nigdzie indziej. Może poniższe są bardziej kanciaste?

dyrektywa

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

Szablon

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

To dodaje trochę indirec i jest to być może mniej do przodu niż wywołanie metody kontrolera.

Answer 1

Aight sir, tutaj jest przykładem, przeprasza, jeśli moje wyjaśnienie nie jest super jasne: http://plnkr.co/edit/3wO3So

Widok:

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

Controller & dyrektywa

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!

Również jeśli chcesz zrozumieć interpolację zakresu, using the &, view this.