isolated scope and nested directives

Question

I am using AngularJS v1.8 and have a problem with isolated scope and nested directives. Please check this plunker(https://plnkr.co/edit/9BXn6QUBYEPy2lUH?open=lib%2Fscript.js) for my code.

Baically, what I am doing is creating a top-level <div> controlled by controller named "myController". Inside the top-level div, there is one element-based directive, <first-directive> controlled by controller "aCtrl", and <first-directive> includes its own child directive, <second-directive>. Both <first-directive> and <second-directive> have isolated scopes.

myApp.controller("myController", function($scope) {
  $scope.message = "Ice Age";
  $scope.greeting = function(name) {
    alert("Greetings to you, " + name);
  };
  $scope.shouting = function() {
    alert("I am shouting!!!");
  };
});

At the scope of the top-level controller, "myController", there are 3 items:

a data model named "message"
a method without any argument named "shouting"
a method with single argument named "greeting(name)"

I tried to pass them down to <first-directive> and <second-directive>. The weird thing is that all work fine except for the method "greeting(name)" at <second-directive>. If you click the buttons in the plunker preview, you will find all work fine except for the "Greetings to Betty" button inside <second-directive> (i.e., the "Greetings to Betty" button inside blue background). I want to know what's wrong here and how to fix so that I can pass top-level method with argument down to child directives.

casenonsensitive casenonsensitive · Accepted Answer · 2020-07-14T22:14:45

What works for me is to change in first_directive.html greeting="aCtrl.greeting(name)" to greeting="aCtrl.greeting({name: name})"

Without looking deeper into it, it seems that name is not known in the scope that is being evaluated and the function call fails completely.

isolated scope and nested directives

1 Answers