CODEWITHSUNDEEP
angularjs
Dee J.
Dee J.

Reputation: 365

Difference between function inside directive VS function inside controller

AngularJS newb here, with a lot of questions.

  1. May I ask what's exactly the difference between a function written inside a directive from one written inside a controller?

For example, in this directive snippet:

link: function(scope, element, attrs) {
                scope.hideModal = function () { 
                    console.log("hide modal fxn called");
                    scope.show = false;
                };
            },
template:'<div class=\"ng-modal\" ng-show=\"$scope.show\">' + 
            '<div class=\"ngdialog-overlay\" ng-click=\"hideModal()\"></div>' +
            '<div class=\"ng-modal-dialog\" ng-style=\"dialogStyle\">' + 
              '<div class=\"ng-modal-close\" ng-click=\"hideModal()\">X</div>' + 
              '<div class=\"ng-modal-dialog-content\" ng-transclude></div>' + 
              '<div style=\"left:80%\"><button type = \"button\" style=\"float:right\">Next</button></div>' +
            '</div>' + 
         '</div>'
  1. Why's the hideModal() function written inside link (not sure what this is called) instead of inside a controller?
  2. Is it possible to write hideModal() inside a controller?
  3. If the answer to #3 is yes, can I omit writing link altogether? Will there be any disadvantages if I do this?

I'm asking these because I can't get the hideModal() function to work no matter where I put it (either directive or in controller), and I want to understand why.

I'd appreciate it very much if you can answer me in layman's terms as much as possible. AngularJS is being such a pain to understand for me and I'm not that well-versed in it yet, so there's a 100% chance that you'll get blank stares from me if you do otherwise.

Thank you.

Upvotes: 0

Views: 784

Answers (1)

Dieterg
Dieterg

Reputation: 16368

  1. There is really no difference if it's added to the $scope. The scope in the link function is exactly the same as the $scope you would $inject in your controller.
  2. Not sure why it's in the link function. I only use link if I need DOM manipulation, i.e. through jQuery
  3. Yes, this is perfectly fine because it's added to the same $scope.
  4. There will be no disadvantages, you can for sure ommit the link function entirely.

the general rule is, do you need DOM manipulation? Use the link function otherwise just stick with controller.

The difference is in execution time, controller function is executed before compilation while link is executed after the template compilation.

That's why you would use the link function for DOM manipulation. During the controller phase the template is not yet compiled, thus you can't use DOM manipulation inside the constructor of your function.

And if you don't need DOM manipulation at all, it might be better to look at the new .component syntax. This is much easier to understand compared to the .directive syntax. Keep in mind the .component syntax is just limited abstraction of .directive

Link to the component docs

Upvotes: 2

Related Questions