Sto provando a fornire una convenzione, o standard, affinché un controllore genitore possa comunicare con una direttiva in Angular.
Fondamentalmente la direttiva avrà un oggetto "settings" contenente i callback e i dati iniziali ricevuti dal controller e un oggetto "api" contenente funzioni pubbliche.
Ho creato un servizio chiamato "gabby" ma non fa molto, solo una comodità.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<my-dir settings="myDirSettings" api="myDirApi"></my-dir>
</div>
Controller principale
angular.module('myApp').controller('appCtrl', function($scope) {
$scope.myDirSettings = {
onStart: function() {
//start the logic
},
defaultName: 'My App Name'
};
$scope.someClick = function() {
$scope.myDirApi.fetchData();
};
});
direttiva
Solo angolare angular.module('myApp').directive('myDir', function() {
return {
controller: 'myDirCtrl',
scope: { settings: '<', api: '=' }
};
});
O con il servizio Gabby
angular.module('myApp').directive('myDir', function(gabby) {
return {
controller: 'myDirCtrl',
scope: gabby.scope()
};
});
Controller della direttiva
Solo angolare angular.module('myApp').controller('myDirCtrl', function($scope) {
angular.extend($scope, {
onStart: function() {},
onSubmit: function() {},
defaultName: 'John'
}, $scope.settings);
$scope.api = $scope.api || {};
$scope.api.clearValues = function() {
//do magic things
};
$scope.api.fetchData = function() {
//do magic things
};
$scope.api.getValues = function() {
//do magic things
};
$scope.onSomeKeyPress = function() {
$scope.onStart();
};
});
O con il servizio Gabby
angular.module('myApp').controller('myDirCtrl', function($scope, gabby) {
gabby.for($scope)
.settings({
//These are the default settings for the directive,
//allowing the reader to easily understand what can
//be passed to the directive
onStart: function() {},
onSubmit: function() {},
defaultName: 'John'
})
.api({
//These are the public functions of the directives
clearValues: function() {
//do magic things
},
fetchData: function() {
//do magic things
},
getValues: function() {
//do magic things
}
});
$scope.onSomeKeyPress = function() {
$scope.onStart();
};
});
Maggiori dettagli: link
- Sto cercando di risolvere un problema già risolto?
- Pensi che questo approccio sia leggibile e chiaro?