Connecting an AngularJS directive to a controller

Question

Connecting an AngularJS directive to a controller

I'm in the process of learning AngularJS directives and facing a challenge. Here's the JSFiddle link to an example I'm working on: https://jsfiddle.net/7smor9o4/

In the example, my expectation is for the vm.alsoId variable to match the value of vm.theId. While vm.theId displays the correct value in the template, vm.alsoId does not.

I need help identifying where I might be going wrong and what steps I can take to achieve my objective effectively.

To give you some context, my end goal is something along the lines of:

function directive(service) {
  var vm = this;
  vm.entity = null;

  init();

  function init() {
    service.getEntity(vm.theId).then(function (entity) {
      vm.entity = entity;
    });
  }
}

javascript angularjs angularjs-directive angularjs-bindings

Answer 1

Answer №1

Notice how the bindToController bindings are not accessible right away in the controller's constructor function, unlike the $scope bindings. The solution lies in a functionality introduced in Angular 1.5 called Lifecycle Hooks, specifically the $onInit.

Your approach was correct; all you need to do is replace your init function definition and invocation with the following:

vm.$onInit = function () {
    service.getEntity(vm.theId).then(function (entity) {
      vm.entity = entity;
    });
};

Here is the link to your updated fiddle: here. (Without this fix, using a watch would have been necessary.)

Answer 2

Notice how the bindToController bindings are not accessible right away in the controller's constructor function, unlike the $scope bindings. The solution lies in a functionality introduced in Angular 1.5 called Lifecycle Hooks, specifically the $onInit.

Your approach was correct; all you need to do is replace your init function definition and invocation with the following:

vm.$onInit = function () {
    service.getEntity(vm.theId).then(function (entity) {
      vm.entity = entity;
    });
};

Here is the link to your updated fiddle: here. (Without this fix, using a watch would have been necessary.)

Answer 3

Answer №2

According to Angular's best practices, it is recommended to bind a controller "only when there is a need to expose an API to other directives. Otherwise, the link function should be used."

You can check out a live example here that demonstrates the use of the link function.

angular.module('myApp', [])
  .directive('myDirective', myDirective);

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

function myDirective() {
  return {
    restrict: 'E',
    scope: {
      uniqueId: '<'
    },
    template: `
        additionalId: <span ng-bind="additionalId"></span>
      uniqueId: <span ng-bind="uniqueId"></span>`,
    link: customLinkFunction
  };
}
function customLinkFunction(scope, element, attrs) {

  initialize();

  function initialize() {
    scope.additionalId = scope.uniqueId;
  }
}

Answer 4

According to Angular's best practices, it is recommended to bind a controller "only when there is a need to expose an API to other directives. Otherwise, the link function should be used."

You can check out a live example here that demonstrates the use of the link function.

angular.module('myApp', [])
  .directive('myDirective', myDirective);

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

function myDirective() {
  return {
    restrict: 'E',
    scope: {
      uniqueId: '<'
    },
    template: `
        additionalId: <span ng-bind="additionalId"></span>
      uniqueId: <span ng-bind="uniqueId"></span>`,
    link: customLinkFunction
  };
}
function customLinkFunction(scope, element, attrs) {

  initialize();

  function initialize() {
    scope.additionalId = scope.uniqueId;
  }
}

Connecting an AngularJS directive to a controller

Answer №1

Answer №2

Similar questions

The error message in threejs is "GL_INVALID_OPERATION: Attempting to perform an invalid operation on

Mastering the art of iterating through a JSON response

Is there a way in AngularJS to iterate through the properties of one object and assign them to the corresponding properties of another object?

Creating a loading indicator in Angular using ui-router to display when transitioning between states

Utilizing Node.js and Express to transmit numerous JSON variables from server to client using response.send()

Does the Angular templateCache get shared across different applications? And does it stay persistent?

`Nextjs customizes the position of locales`

What is the best way to monitor a document variable that is set after a component has been

How can I position an object in Three.js to perfectly align with the left half of the screen, adjusting both its width

c3.js Error: The value of b is not defined

The updateItem function in the JSGrid controller was not called

Enhance JQuery functionality using Typescript

The retrieval of JSON data in a JavaScript function is malfunctioning

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

The database is failing to reflect any changes even after using the db.insert function

AngularJS - managing checkboxes and dropdownlists

Firebase 3 authentication does not maintain persistent login sessions

Having issues with the Carousel feature in Bootstrap 5.3.1 while using Angular version 15

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

Utilizing a loop for setting variable values in JavaScript