Isolated directive with two-way binding in Angular, but the property is not defined?

Question

Isolated directive with two-way binding in Angular, but the property is not defined?

Confusion arises when trying to understand the concept of two-way data binding. Let's take a look at the code snippet below:

.directive('mupStageButtons', function() {
    return {
        transclude: true,
        template: '<span ng-transclude></span>',
        replace: true,
        scope: {
            property: "=",
            action: "="
        },
        controller: function($scope) {
            console.log($scope); //I can see the property of $scope defined in console
            console.log($scope.property); //undefined
            this.property = $scope.property;
            this.changeStage = $scope.action; //anyway this is ok
        },
    };
})
.directive('mupStageButton', function() {
    return {
        transclude: true,
        templateUrl: '/static/templates/directives/StageButton.html',
        require: '^^mupStageButtons',
        scope: {
            value: "=",
            btnClass: "@",
        },
        link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
            scope.property = mupStageButtonsCtrl.property;
            scope.changeStage = mupStageButtonsCtrl.changeStage;
        }
    };
})

//html

<mup-stage-buttons property="company.stage" action="setStage">
    <mup-stage-button value="0" btn-class="btn-default-grey">
    </mup-stage-button>
</mup-stage-buttons>


//controller for that html ^^^

.controller('CompanyDetailController', function($scope, $stateParams, Company){
    Company.query ({
      id : $stateParams.companyId
    }, function (data) {
      $scope.company = new Company(data);
    });
}

//template for <mup-stage-button>

<label ng-class="property === value ? 'active' : 'btn-on-hover' " class="btn {{btnClass}}" ng-click="changeStage(value)">
    <div ng-transclude></div>
</label>

The question here is about whether "=" signifies that changes in the outer scope will be reflected through data binding. In this scenario, however, fetching a $resource leaves the "property" undefined even after it has been fetched. What could be causing this issue?

EDIT: The expected behavior is for the ng-class in the <mup-stage-button> template to function correctly.

EDIT: View the plunker for more context: https://plnkr.co/edit/drXxyMpd2IOhXMWFj8LP?p=preview

javascript angularjs

Answer 1

Answer №1

One key point to note about the transclude option is that the content wrapped within it is connected to the OUTER scope rather than the directive's scope.

After compilation, the scope bindings in your scenario will appear as follows:

<div ng-controller="CompanyDetailController">
    <mup-stage-buttons property="company.stage" action="setStage"> <-- although 'property' is correctly bound, it is not accessible below due to transclusion -->
        <span ng-transclude>
            {{company.stage}} <!-- Accessible here due to transclusion, but 'property' is not available! -->

            <mup-stage-button property="company.stage" value="0"> 
                <!-- Scope of the directive here can bind to outer scope's 'company.stage' -->
                {{property}} - {{value}} <!-- this will work -->
                <label ng-class="property === value ? 'active' : 'btn-on-hover'" class="btn {{btnClass}}" ng-click="changeStage(value)">
                    <div ng-transclude>
                        <!-- Content transcluded here, connected to CompanyDetailController $scope -->
                        not working ng-class 0
                    </div>
                </label>
            </mup-stage-button>
        </span>
    </mup-stage-buttons>
</div>

To resolve this issue and make your code function correctly (Plunk), you just need to map the property to company.stage on the child directive exclusively.

UPDATE

In order to eliminate repetitive binding of property="company.stage" on child directives and pass data through the controller and link function of parent and child directives respectively, it is recommended to utilize a wrapping object for your scope properties. This way, changes made to this object will be reflected in the child scopes as they share a reference to the object. This concept is known as the dot notation:

CompanyDetailController:

$scope.vars = {};
this.getCompany = function () {
  $scope.vars.company = $scope.company = {stage: 0}; 
};

Then bind the vars property to the parent directive's scope:

// ...
scope: {
    vars: '=',
},
controller: function($scope) {
    this.vars = $scope.vars;
}
// ...

Next, assign the reference of vars to the child directive's scope:

// ...
link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
    scope.vars = mupStageButtonsCtrl.vars;
}
// ...

Finally, access it in the view of the child directive:

<label ng-class="vars.company.stage === value ? 'active' : 'btn-on-hover'">...</label>

This approach eliminates the need to duplicate bindings on instances of the child directive.

Plunk has been updated accordingly.

Answer 2

One key point to note about the transclude option is that the content wrapped within it is connected to the OUTER scope rather than the directive's scope.

After compilation, the scope bindings in your scenario will appear as follows:

<div ng-controller="CompanyDetailController">
    <mup-stage-buttons property="company.stage" action="setStage"> <-- although 'property' is correctly bound, it is not accessible below due to transclusion -->
        <span ng-transclude>
            {{company.stage}} <!-- Accessible here due to transclusion, but 'property' is not available! -->

            <mup-stage-button property="company.stage" value="0"> 
                <!-- Scope of the directive here can bind to outer scope's 'company.stage' -->
                {{property}} - {{value}} <!-- this will work -->
                <label ng-class="property === value ? 'active' : 'btn-on-hover'" class="btn {{btnClass}}" ng-click="changeStage(value)">
                    <div ng-transclude>
                        <!-- Content transcluded here, connected to CompanyDetailController $scope -->
                        not working ng-class 0
                    </div>
                </label>
            </mup-stage-button>
        </span>
    </mup-stage-buttons>
</div>

To resolve this issue and make your code function correctly (Plunk), you just need to map the property to company.stage on the child directive exclusively.

UPDATE

In order to eliminate repetitive binding of property="company.stage" on child directives and pass data through the controller and link function of parent and child directives respectively, it is recommended to utilize a wrapping object for your scope properties. This way, changes made to this object will be reflected in the child scopes as they share a reference to the object. This concept is known as the dot notation:

CompanyDetailController:

$scope.vars = {};
this.getCompany = function () {
  $scope.vars.company = $scope.company = {stage: 0}; 
};

Then bind the vars property to the parent directive's scope:

// ...
scope: {
    vars: '=',
},
controller: function($scope) {
    this.vars = $scope.vars;
}
// ...

Next, assign the reference of vars to the child directive's scope:

// ...
link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
    scope.vars = mupStageButtonsCtrl.vars;
}
// ...

Finally, access it in the view of the child directive:

<label ng-class="vars.company.stage === value ? 'active' : 'btn-on-hover'">...</label>

This approach eliminates the need to duplicate bindings on instances of the child directive.

Plunk has been updated accordingly.

Answer 3

Answer №2

When working with JavaScript

Primitives are passed by value, Objects are passed by "copy of a reference".

For a more detailed explanation, check out this resource: stackoverflow.com/questions

One way to tackle this issue is by using the $watch method:

.directive('mupStageButtons', function() {
    return {
        transclude: true,
        template: '<span ng-transclude></span>',
        replace: true,
        scope: {
            property: "=",
            action: "="
        },
        controller: function($scope) {
            that = this;
            $scope.$watch('property', function(newValue){
                that.property = newValue;    
      /***Refreshing this.property (normal assignment would only copy value, 
     it would not behave as a reference to desired transcluded property)***/
            });
            this.changeStage = $scope.action;
        },
    };
})
.directive('mupStageButton', function() {
    return {
        transclude: true,
        templateUrl: '/static/templates/directives/StageButton.html',
        require: '^^mupStageButtons',
        scope: {
            value: "=",
            btnClass: "@",
        },
        link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
            scope.btnCtrl = mupStageButtonsCtrl;
            scope.changeStage = mupStageButtonsCtrl.changeStage;
        }
    };
})

In addition to the $watch method, another crucial part is utilizing this in the link function:

scope.btnCtrl = mupStageButtonsCtrl;

Instead of simply doing:

scope.property = mupStageButtonsCtrl.property;

which would create a separate copy and not update dynamically, assigning the ctrl reference to scope.btnCtrl resolves the issue. Here is the template for the child directive:

<label ng-class="btnCtrl.property === value ? 'active' : 'btn-on-hover' " class="btn {{btnClass}}" ng-click="changeStage(value)">
    <div ng-transclude></div>
</label>

Now, these directives can be used generically by passing just the property like company.stage, eliminating the need for the directive to know the specific property name (stage).

<mup-stage-buttons property="company.stage" action="setStage">
    <mup-stage-button value="0" btn-class="btn-default-grey">
        Stage 0
    </mup-stage-button>
</mup-stage-buttons>

Answer 4

When working with JavaScript

Primitives are passed by value, Objects are passed by "copy of a reference".

For a more detailed explanation, check out this resource: stackoverflow.com/questions

One way to tackle this issue is by using the $watch method:

.directive('mupStageButtons', function() {
    return {
        transclude: true,
        template: '<span ng-transclude></span>',
        replace: true,
        scope: {
            property: "=",
            action: "="
        },
        controller: function($scope) {
            that = this;
            $scope.$watch('property', function(newValue){
                that.property = newValue;    
      /***Refreshing this.property (normal assignment would only copy value, 
     it would not behave as a reference to desired transcluded property)***/
            });
            this.changeStage = $scope.action;
        },
    };
})
.directive('mupStageButton', function() {
    return {
        transclude: true,
        templateUrl: '/static/templates/directives/StageButton.html',
        require: '^^mupStageButtons',
        scope: {
            value: "=",
            btnClass: "@",
        },
        link: function(scope, element, attrs, mupStageButtonsCtrl, transclude) {
            scope.btnCtrl = mupStageButtonsCtrl;
            scope.changeStage = mupStageButtonsCtrl.changeStage;
        }
    };
})

In addition to the $watch method, another crucial part is utilizing this in the link function:

scope.btnCtrl = mupStageButtonsCtrl;

Instead of simply doing:

scope.property = mupStageButtonsCtrl.property;

which would create a separate copy and not update dynamically, assigning the ctrl reference to scope.btnCtrl resolves the issue. Here is the template for the child directive:

<label ng-class="btnCtrl.property === value ? 'active' : 'btn-on-hover' " class="btn {{btnClass}}" ng-click="changeStage(value)">
    <div ng-transclude></div>
</label>

Now, these directives can be used generically by passing just the property like company.stage, eliminating the need for the directive to know the specific property name (stage).

<mup-stage-buttons property="company.stage" action="setStage">
    <mup-stage-button value="0" btn-class="btn-default-grey">
        Stage 0
    </mup-stage-button>
</mup-stage-buttons>

Isolated directive with two-way binding in Angular, but the property is not defined?

Answer №1

Answer №2

Similar questions

Why does the 401 error continue to persist while attempting to log in using Google Identity service on my Laravel application?

Whenever I attempt to start the server using npm run server, I encounter the following error message: "Error: Unable to locate module './config/db'"

Ways to conceal <td>s in angularjs on specific rows during ng-repeat

retrieve user photos from twitter using angular.js and firebase

AJAX call error: Invocation not permitted

Generate a unique identifier for the HTML content

Encountering an "AJAX not a function" error while using the d3/flask interface

Having trouble getting the templateUrl to work properly with AngularUI-Router?

Encountering issues with running NPM on my Ubuntu server hosted on Digital Ocean

Transferring information through Ajax to PHP

Explore the full range of events available on the Angular UI-Calendar, the innovative directive designed for Arshaw FullCalendar

Passing a PHP array to a JavaScript function using a button click event in an HTML form

Can I substitute custom tags for the traditional <p> tag?

Obtain a specific item from an array using its id in HTML with the help of angular.js

Are there any negatives to turning off create-react-app's SKIP_PREFLIGHT_CHECK option?

In need of clarification on the topic of promises and async/await

Protractor - selecting a button within a table

XMLHttpRequest Error: The elusive 404 code appears despite the existence of the file

Tips for effectively handling an angularjs HTTP error with a custom page error in MVC

Initiate the Material TextField onChange event from within a nested component