0

Context:

I'm using Angular and ui-router...

I have a parent controller "ParentCtrl" with a template "ParentTempl".

Within the ParentTempl there is a view for 2 states: add and edit.

I want call a function from the ParentCtrl "abstractUpdate" that changes its behavior based on which state is active.

Current Code:

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('add', {
        template: "...", 
        abstractUpdate = function(object){
            // do add things
        }
    })
    .state('edit', {
        template: "...", 
        abstractUpdate = function(object){
            // do edit things
        }
    });
}

app.controller('ParentCtrl', function ($scope, $state) {
    $scope.click = function(obj){
        $state.current.abstractUpdate(obj);
    }
}

Question:

The current version is working, but you think it is the best solution? Any suggestions?

nipo
  • 180
  • 9

2 Answers2

0

It would be more clear to have two separate functions that each perform their separate tasks. It's a better programming habit, imo.

You can create a controller for each of your child views and still have ParentCtrl as a parent for each. Each child controller can have its own click handler which calls either the 'edit' or 'new' method on the parent (unless it makes more sense to put that code entirely or partially on each child controller).

HankScorpio
  • 3,612
  • 15
  • 27
  • Ok, I already have a service for each operation "add" and "edit". How to call each operation in the child controllers / handling the clicks ? Could you add some code.. ? Thnks – nipo Mar 10 '15 at 01:07
0

Usually you would use a factory or service for something like this. That way you don't clog up your routing with application logic. You could just inject $state into your factory/service so you can handle things based on the state you're in:

angular.module('myApp').factory('MyService', [
    '$state',
    function ($state) {
      return {
        myMethod: function (obj) {
          if (this.hasOwnProperty($state.current.name)) {
            this[$state.current.name](obj);
          }
        },
        add: function (obj) {
          // do stuff
          return obj;
        },
        edit: function (obj) {
          // do stuff
          return obj;
        }
      }
    }
]);

Now you can use your service from any controller you want, just inject it:

 angular.module('myApp').controller('myController', [
     '$scope',
     'MyService',
     function ($scope, MyService) {
         $scope.obj = {};
         $scope.obj = MyService.myMethod(obj);
     }
 ]);
iH8
  • 27,722
  • 4
  • 67
  • 76
  • Ok, I got your idea.. makes sense take the logic out of the state machine. But, in this case I want to call "MyMethod" and from it return a different function based on the current state.. a switch case should works... Could you edit your answer, please? Once you edit I will accept it... Thanks =D – nipo Mar 10 '15 at 01:28
  • Done, something along those lines you mean? hope that helps :) No thanks, you're always welcome, this is what SO is for. – iH8 Mar 10 '15 at 01:48