AngularJS controller function not firing

Question

I have 3 directives, "parenta", "parentb", and "childb". "parenta" and "parentb" are siblings, while "childb" is a direct child of "parentb".

I am trying to call a controller method from "parenta", however it is not working. For some strange reason, trying to call a method on "childb" controller FROM "parenta" is working instead. What is happening?

var mod = angular.module("app", []);

mod.directive("parenta", function () {
    return {
        template: "<section><div ng-click='vm.a()'>Rendered by a</div></section>",
        replace: false,
        controllerAs: "vm",
        controller: function () {
            this.a = function () {
                console.log("a called!");
            }
        }
    }
})

mod.directive("parentb", function () {
    return {
        template: "<childb></childb>",
        replace: false
    }
})

mod.directive("childb", function () {
    return {
        template: "<section><div ng-click='vm.b()'>Rendered by b</div></section>",
        replace: false,
        controllerAs: "vm",
        controller: function () {
            this.b = function () {
                console.log("b called!");
            }
        }
    }
})

Html:

<div ng-app="app">
    <parenta></parenta>
    <parentb></parentb>
</div>

Codepen: http://codepen.io/anon/pen/pJMpVe

you did not write an angular directive, your looks like a mix of half directive and half controller !?! check documentation please docs.angularjs.org/guide/directive — Filippo oretti
– Filippo oretti, Commented Aug 25, 2015 at 6:48

New Dev · Accepted Answer · 2015-08-25 07:08:15Z

2

The issue here is that your directives do not create a child or an isolate scope and use scope: false (which is the default).

That means that for a given scope, each directive with its aliased controller, create a scope property called vm - both on the same scope. And so, childb overwrites the vm property initially created by parenta.

You can check this quite easily - change one of controllerAs aliases to something else.

An easy fix - and the right thing to do - is to use either scope: true or scope: {}.

edited Aug 25, 2015 at 7:08

answered Aug 25, 2015 at 6:52

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Grundy Over a year ago

or rename value in controllerAs property :-)

New Dev Over a year ago

@Grundy, I only suggested renaming as a test. I don't think it's the right thing to do, since a directive should not be "polluting" the scope where it operates. "Renaming" solves the current issue, but it's just waiting for a hard-to-trace bug to appear.

MichaelAttard Over a year ago

I will be creating an isolated scope, which suits my purposes.

Grundy Over a year ago

@NewDev, yep :-) this is just yet another quick fix :-)

Ashish Saxena · Accepted Answer · 2015-08-26 04:11:23Z

I used link function instead of controller.

Directive controllers are used in AngularJS for inter-directive communication, while link functions are fully contained and specific to the directive instance. By interdirective communication, we mean when one directive on an element wants to communicate with another directive on its parent or on the same element. This encompasses sharing state or variables, or even functions.

In the below code I commented the controller function and placed link function

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script type="text/javascript">

var mod = angular.module("app", []);

mod.directive("parenta", function () {
    return {
        /*template: "<section><div ng-click='vm.a()'>Rendered by a</div></section>",*/
        template: "<section><div ng-click='a()'>Rendered by a</div></section>",
        replace: false,
        link: function($scope,$element,$attrs)
        {
        	$scope.a = function()
        	{        		
                console.log("a called!");
        	}
        }        
       /* controllerAs: "vm",
        controller: function () {
            this.a = function () {
            	alert("a called!");
                console.log("a called!");
                
            }
        }        
        */
    }
})

mod.directive("parentb", function () {
    return {
        template: "<childb></childb>",
        replace: false
    }
})

mod.directive("childb", function () {
    return {
        template: "<section><div ng-click='vm.b()'>Rendered by b</div></section>",
        replace: false,
        controllerAs: "vm",
        controller: function () {
            this.b = function () {            	
            	console.log("b called!");
            }
        }
    }
})

</script>


<body>

<div ng-app="app">
    <parenta></parenta>
    <parentb></parentb>
</div>

</body>
</html>

or if we want to use controller directive then better to use Directive Isolate Scopes along with.

Unlike a controller, which is paired with a newly created scope when created, a directive is not given a scope of its own by default. Instead, it simply uses the scope that is available, based on its location in the DOM.

Isolate scope just means giving the directive a scope of its own that does not inherit from the existing scope.

so we use

scope: true in our parenta

mod.directive("parenta", function () {
    return {             
    template: "<section><div ng-click='vm.a()'>Rendered by a</div></section>", 
 	replace: false,
 	scope: true , // Isolate scope
 
	 controllerAs: "vm",
	 controller: function () {
     this.a = function () {            	
         console.log("a called!");
         
     }
 }

Collectives™ on Stack Overflow

AngularJS controller function not firing

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related