CODEWITHSUNDEEP
angularjsangularjs-scopeangular-directive
Leon Gaban
Leon Gaban

Reputation: 39018

How to refactor directive and change functionality by checking parent scopes?

I have a form with a ton of duplicate functionality in 2 different Controllers, there are slight differences and some major ones in both.

The form sits at the top of a products view controller, but also inside of the products modal controller.

Test plunker: http://plnkr.co/edit/EIW6xoBzQpD26Wwqwwap?p=preview
^ how would you change the string in the console.log and the color of the button based on parent scope?

enter image description here

At first I was going to create a new Controller just for the form, but also the HTML was being duplicated, so decided to put that into a Directive, and just add the Controller code there.

My question now is this: How would I determine which parent scope the form-directive is currently being viewed in? Because depending on the parent scope the functions/methods behave differently.

So far I've come up with this:

.directive('productForm', function() {
    return {
        templateUrl: "views/products/productForm.html",
        restrict: "E",
        controller: function($scope) {
            console.log('controller for productForm');
            console.log($scope);
            console.log($scope.$parent);

            /*
              If parent scope is the page, then this...

              If parent scope is the modal then this instead...
            */
        }
    }
});

However it's giving me back $parent id's that look like 002 or 00p. Not very easy to put in if / else statements based on that information.

Have you guys run into this issue before?

Upvotes: 0

Views: 61

Answers (2)

sylwester
sylwester

Reputation: 16498

You can define 'saveThis' in your controller and pass it to directive using '&' 

  scope: {
      user: '=',
      saveThis : '&'
    },

please see demo here http://plnkr.co/edit/sOY8XZtEXLORLmelWssS?p=preview That gives you more flexibility, in future if you want to use saveThis in another controller you can define it inside controller instead adding additional if statement to directive.

Upvotes: 1

JackNova
JackNova

Reputation: 3931

You could add two way binding variables in the directive scope, this allows you to specify which Ctrl variable gets bound to which directive variable

<my-directive shared="scopeVariable">

this way you achieve two way binding of the scopeVariable with the shared directive variable

you can learn more here

I advice against this practice and suggest you to isolate common logics and behaviours in services or factories rather than in directives

This is an example of a directive that has isolated scope and shares the 'title' variable with the outer scope.

You could declare this directive this way: now inside the directive you can discriminate the location where the directive is defined; just replace the title variable with a location variable and chose better names.

.directive('myPane', function() {
  return {
    restrict: 'E',
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {

    },
    templateUrl: 'my-pane.html'
  };
});

Upvotes: 1

Related Questions