Angular: bindToController directive mishandles data

Question

Angular: bindToController directive mishandles data

I created the actionButtons directive:

function actionButtons(){
    'use strict';
    return {
        scope: {},
        restrict: 'AE',
        bindToController: {
            itemId: '@',
            itemDescription: '@',
            actionsText: '@',
            previewAction: '&',
            previewText: '@',
            editAction: '&',
            editText: '@',
            removeAction: '&',
            removeText: '@'
        },
        controller: ActionButtonsController,
        controllerAs: 'actionButtonsCtrl',
        templateUrl: 'src/views/directives/actionButtons.html'
    };
}

The ActionButtonsController controller associated with it is as follows:

/**
 *
 * @constructor
 */
function ActionButtonsController() {
    'use strict';
    var viewModel = this;
    //not important assertions
    }
    /**
     *
     * @type {boolean}
     */
    viewModel.hasItemDescription = typeof viewModel.itemDescription === 'string' &&
        viewModel.itemDescription.length > 0;
    /**
     *
     * @type {string}
     */
    viewModel.previewText = viewModel.previewText || 'preview';
    /**
     *
     * @type {string}
    ...
url-toggle aria-haspopup="true">
    {{actionButtonsCtrl.actionsText}} <span class="sr-only" data-ng-if="::actionButtonsCtrl.hasItemDescription">
        for {{::(actionButtonsCtrl.itemDescription)}}</span></button>
</div>

This is how I include it in my application:

<td class="col-md-3 col-xs-3 text-center">
    <div data-action-buttons
         data-item-id="{{author.id + '_' + author.name + '_' + author.surname}}"
         data-item-description="{{author.name + ' ' + author.surname}}"
         data-preview-action="authorCtrl.preview(author)"
         data-edit-action="authorCtrl.edit(author)"
         data-remove-action="authorCtrl.remove(author)"
        ></div>
</td>

However, I encountered some issues. For instance, although actionsText and itemDescription are both optional inputs, only actionsText correctly defaults to "Actions" if not specified, while itemDescription always remains visible in the HTML DOM even when not provided. Despite checking the controller code, the value of actionsText appears as undefined at times, causing confusion. I am unsure why this happens and seek assistance in resolving this matter. Thank you for your help. P.S. I attempted to return the viewModel variable from the controller without success. P.S. 2 Notably, specifying actionsText directly (e.g.,

data-actions-text={{'Something'}}

) resolves the issue.

javascript angularjs angularjs-directive angularjs-controller angularjs-controlleras

Answer 1

Answer №1

Utilizing bindToController leads to the indirect addition of scope values to the controller's context. However, this issue arises when using the @ symbol within the bindToController expression.

When dealing with controllerAs, bindToController, and scope with @, Angular approaches things slightly differently.

In essence, if you use @ on a scope variable within an isolated scope with controllerAs and bindToController, Angular sets up a watcher using $observe on the specified expression in the attribute value (see Angular code for reference).

The recommended solution is to utilize $timeout for all assignments that fetch values using @ from isolated scope values. This is because the value binds in the subsequent digest cycle after the evaluation of the $observe expression.

Code

function ActionButtonsController() {
    'use strict';
    var viewModel = this;
    $timeout(function() {
        viewModel.hasItemDescription = typeof viewModel.itemDescription === 'string' &&
            viewModel.itemDescription.length > 0;

        viewModel.previewText = viewModel.previewText || 'preview';

        viewModel.editText = viewModel.editText || 'edit';

        viewModel.removeText = viewModel.removeText || 'remove';

        viewModel.actionsText = viewModel.actionsText || 'Actions';
    })

    viewModel.preview = function() {
        viewModel.previewAction();
    };

    viewModel.edit = function() {
        viewModel.editAction();
    };

    viewModel.remove = function() {
        viewModel.removeAction();
    };
};

This provides a more detailed explanation in another answer.

Answer 2

Utilizing bindToController leads to the indirect addition of scope values to the controller's context. However, this issue arises when using the @ symbol within the bindToController expression.

When dealing with controllerAs, bindToController, and scope with @, Angular approaches things slightly differently.

In essence, if you use @ on a scope variable within an isolated scope with controllerAs and bindToController, Angular sets up a watcher using $observe on the specified expression in the attribute value (see Angular code for reference).

The recommended solution is to utilize $timeout for all assignments that fetch values using @ from isolated scope values. This is because the value binds in the subsequent digest cycle after the evaluation of the $observe expression.

Code

function ActionButtonsController() {
    'use strict';
    var viewModel = this;
    $timeout(function() {
        viewModel.hasItemDescription = typeof viewModel.itemDescription === 'string' &&
            viewModel.itemDescription.length > 0;

        viewModel.previewText = viewModel.previewText || 'preview';

        viewModel.editText = viewModel.editText || 'edit';

        viewModel.removeText = viewModel.removeText || 'remove';

        viewModel.actionsText = viewModel.actionsText || 'Actions';
    })

    viewModel.preview = function() {
        viewModel.previewAction();
    };

    viewModel.edit = function() {
        viewModel.editAction();
    };

    viewModel.remove = function() {
        viewModel.removeAction();
    };
};

This provides a more detailed explanation in another answer.

Angular: bindToController directive mishandles data

Answer №1

Similar questions

Filtering data in AngularJS ui-grid 3.x using an input box

How can we ensure that React state remains unaltered when modifying an array set to state?

Why isn't the Angular function being activated by the HTML generated by the datatable?

Override existing Keywords (change false to true)

Having trouble displaying the image in my administrative tool

Using grunt to optimize and generate cache manifest

Refresh the input data post verification

Is there a way to retrieve the original value of the substr value?

confrontation arising between two PHP scripts due to conflicting functionalities within the MetaSlider plugin

After switching from jQuery to pure JavaScript, the code is now up and

Is it possible to redirect a URL in AngularJS without loading a new page

JavaScript and PHP open-source libraries for enabling voice chat functionality

Ways to hide the dropdown when clicking away from the menu in angularjs

Retrieving MongoDB Query Data in Node API - What is the best way to send the mongoDB query results back to the

Leveraging jQuery within a method defined in an object using MyObject.prototype.method and the 'this' keyword

Module 'git-host-info.js' not found

Ways to convert JavaScript object to hashmap

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

Retrieving JSON information from a PHP script with AJAX

What can I do to stop a webpage from automatically refreshing when I submit a form?