Extending a 3rd-party Angular controller

Question

I've looked at the questions and documentation for extending a 3rd-party Angular directive. What I really need to do though is extend a 3rd-party Angular controller.

I'm using the Smart Table library in my application and its suggestion for implementing list row selection with checkboxes. My application however, requires two types of selections:

Checkbox selection, where checkboxes can be used to select a single or multiple rows (already covered with the csSelectAll directive in the link above)
Row highlighting, where only a single row can be highlighted

It would be easy for me to write a highlight function for the stTableController based on the select method. But I would like to be able to do this without forking Smart Table myself.

I tried the solution for extending controllers, but it appears to assume that the parent and child controller live in the same module. When I try the following code:

angular.module('myApp')
  .controller('smarterTableController', function(<required deps>) {
     $controller('smartTableController', {$scope: $scope}));
     //initialization stuff left out...
     this.highlight = function(row) {
       var rows = copyRefs(displayGetter($scope));
       var index = rows.indexOf(row);
       if (index !== -1) {
         row.isHighlighted = row.isHighlighted !== true;
         if (lastHighlighted) {
           lastHighlighted.isHighlighted = false;
         }
        lastHighlighted = row.isHighlighted === true ? row : undefined;
      }
    };
  });
  //corresponding extension of the stTable directive to use the smarterTableController

This solution doesn't appear to work though. When I call the parent controller's function using $controller, I get the error:

Argument 'smartTableController' is not a function, got undefined

Here are my two questions:

Should I be able to extend a 3rd-party controller in this way?
If not, is forking the project and adding this extra bit of functionality my only other option?

For your second question, it is kind to do a pull request on the main branch after your changes ;-) — Deblaton Jean-Philippe, Nov 08 '15 at 08:35
Of course, I would definitely open an issue with the original project asking them if they are interested in my changes and contribute if they want them. I don't want to maintain my own fork for this one thing after all :-). But I don't know how common needing to select *and* highlight is, so I didn't want to be presumptuous by creating a pull request straight away. — Jay, Nov 08 '15 at 09:04

score 0 · Answer 1 · answered Nov 08 '15 at 08:33

0

I Think you should create a custom directive, using the require parameter.

Have a look at the doc here : https://docs.angularjs.org/guide/directive#creating-directives-that-communicate

angular.module('myApp').directive("smarterTable", function(){
    return {
        require:"smartTable",
        link: function(arg1, arg2, arg3, smartTableController){
             // Put your logic here
        }
    }


});

And in your view, you will have to add :

<smart-table smarter-table=""></smart-table>

answered Nov 08 '15 at 08:33

Deblaton Jean-Philippe

11,188
3
49
66

I'll try this out. Right now I've made my own fork because it was quicker. Your solution appears nicer, but I don't yet understand how it works and probably won't understand till I actually implement it myself. – Jay Nov 08 '15 at 09:05
When you create a directive, the argument `require` looks for a controller on the same element. It then passes the controller object (or scope) to your link function (which is, in the directive lifecycle executer after the controller). – Deblaton Jean-Philippe Nov 08 '15 at 10:17

Extending a 3rd-party Angular controller

1 Answers1