My custom Angular directive functions as a unique combobox, where clicking on the input control reveals a div below it with a list of items from a model object. The user can type text into the input control to filter the displayed list.
In addition to the directive, I have several independent button objects within the same scope that trigger methods like $scope.clearFilter() and $scope.unselectAll(). These methods then call directiveScope.clearFilter() or directiveScope.unselectAll(). directiveScope acts as a shared object between the combobox directive and the main controller, allowing the controller direct access to the directive's methods.
To demonstrate my implementation method, I've created a small example on Plunker. Please note that this example is illustrative and not an exact representation of my code (due to licensing concerns).
// HTML
<my-directive sharedobj="myDirective1"></my-directive>
<input type="button" ng-click="clearFilterText1()" value="Clear"/><br/><br/>
// JS
var app = angular.module( 'Test', [] );
app.controller( 'MyController', [ '$scope', function( $scope ) {
$scope.myDirective1 = {};
$scope.myDirective2 = {};
$scope.clearFilterText1 = function() {
console.log("Calling directive 1");
$scope.myDirective1.clearFilterText();
}
$scope.clearFilterText2 = function() {
console.log("Calling directive 2");
// QUESTION: If calling this directive method is bad practice, what is
// equivalent good practice?
$scope.myDirective2.clearFilterText();
}
}]);
app.directive( 'myDirective', function() {
return {
template: "<div><input type='text' ng-model='filterText'/></div>",
scope: {
sharedobj: "="
},
restrict: 'E',
replace: true,
link: function( scope, elem, attrs ) {
// Private text for the directive to display
scope.filterText = "filter this!";
// Method contained in the sharedobj linked to the controller, updating view state directly
scope.sharedobj.clearFilterText = function() {
console.log("Setting filter text!");
scope.filterText = "";
}
}
};
});
Some critics argue that having an Angular controller communicate directly with a directive is poor design. However, according to Wikipedia's MVC page:
A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document).
This aligns with my approach of utilizing directives as views and the directive methods called as commands. Despite some objections online, including posts like this one, suggesting it's flawed without clear reasoning, I find the alternative of introducing a separate service overly complex. Managing state via a service feels convoluted compared to simply calling directive methods directly, which streamlines the process without excessive overhead.
I seek insights from Angular/MVC experts on the validity of my approach. Your feedback would be greatly appreciated!
Thank you.