Directive does not bind correctly to parent scope

When a directive does not correctly bind to the parent scope, it usually happens due to:

1. Incorrect scope binding (@, =, &)
2. Isolated scope issues
3. Directive restriction mismatch (restrict: 'E' | 'A' | 'C')
4. Incorrect use of controller, link, or $scope
5. Parent scope hierarchy issues

---

1️⃣ Understanding Scope Binding in Directives

Scope Binding Types in AngularJS

Binding Type	Symbol	Description	Example
One-way binding (String)	@	Binds a string value from parent scope	scope: { name: '@' }
Two-way binding (Object/Array)	=	Syncs changes between directive and parent	scope: { user: '=' }
Function binding (Callback to parent function)	&	Calls a function from parent scope	scope: { onClick: '&' }

---

2️⃣ Common Causes & Fixes

Cause 1: Using Isolated Scope (scope: {}) Without Correct Binding

If you define scope: {} in your directive but do not pass values from the parent, the directive will not inherit the parent scope.

Problematic Code

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: {},  //  Isolated scope without bindings
        template: "<p>Name: {{ name }}</p>"
    };
});

<my-directive></my-directive>  <!--  Won't receive `name` from parent -->

Solution: Use scope binding (@, =, &)

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: {
            name: "@"  //  One-way binding (string)
        },
        template: "<p>Name: {{ name }}</p>"
    };
});

htmlCopyEdit<my-directive name="John Doe"></my-directive>  <!-- ✅ Works correctly -->

---

Cause 2: Not Using Two-Way Binding (=) for Objects

If you need to modify a parent scope variable from the directive, use two-way binding (=).

Problematic Code

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: {
            name: "@"
        },
        template: `<input type="text" ng-model="name">`
    };
});

<div ng-controller="MainCtrl">
    <my-directive name="userName"></my-directive>  <!-- ❌ Does not update `userName` -->
</div>

Solution: Use = (two-way binding)

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: {
            name: "="  //  Two-way binding
        },
        template: `<input type="text" ng-model="name">`
    };
});

<div ng-controller="MainCtrl">
    <input type="text" ng-model="userName">  <!-- Updates everywhere -->
    <my-directive name="userName"></my-directive>
</div>

---

Cause 3: Using scope: false Without Parent Scope Variable

If you set scope: false, the directive should use the parent scope, but the parent must have the variable.

Problematic Code

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: false,  // ❌ Uses parent scope, but no `name` in parent
        template: "<p>Name: {{ name }}</p>"
    };
});

<my-directive></my-directive>  <!--  Won't work if `name` is missing in parent scope -->

Solution: Ensure name exists in the parent controller

app.controller("MainCtrl", function($scope) {
    $scope.name = "John Doe";  //  Defined in parent scope
});

<div ng-controller="MainCtrl">
    <my-directive></my-directive>  <!--  Now it works -->
</div>

---

Cause 4: Function Binding (&) Not Invoked Properly

If a directive calls a function from the parent scope, it must be correctly bound.

Problematic Code

app.directive("myDirective", function() {
    return {
        restrict: "E",
        scope: {
            onClick: "&"
        },
        template: `<button ng-click="onClick()">Click Me</button>`
    };
});

<div ng-controller="MainCtrl">
    <my-directive on-click="alert('Clicked!')"></my-directive>  <!-- ❌ Function not invoked -->
</div>

Solution: Use a controller function

app.controller("MainCtrl", function($scope) {
    $scope.sayHello = function() {
        alert("Hello from parent!");
    };
});

<div ng-controller="MainCtrl">
    <my-directive on-click="sayHello()"></my-directive>  <!-- ✅ Now works -->
</div>

---

3️⃣ Directive Restriction Mismatch

Directives can be applied as elements (E), attributes (A), classes (C), or comments (M).

Restriction	Symbol	Example
Element	E	<my-directive></my-directive>
Attribute	A	<div my-directive></div>
Class	C	<div class="my-directive"></div>

Cause 5: Wrong Restriction Setting

Problematic Code

app.directive("myDirective", function() {
    return {
        restrict: "A",  //  Expecting attribute, but using element
        template: "<p>Directive content</p>"
    };
});

<my-directive></my-directive>  <!--Won't work -->

Solution: Use the correct restriction

restrict: "E"

or

<div my-directive></div>  <!--  Matches `restrict: 'A'` -->

---

4️⃣ Debugging Steps

Check the browser console (F12 → Console) for errors
Ensure the parent scope has the expected variable
Use console.log($scope) inside the directive to debug scope issues
Try scope: false if you want to inherit from the parent
Ensure the correct restriction (restrict: 'E' | 'A' | 'C') is set