directive in Angular ordering

Question

directive in Angular ordering

After exploring this link, my understanding deepened:

Upon analyzing the code snippet provided in the link above, I noticed that the Angular app consists of both a controller and a directive. However, there seems to be an issue where the variables defined in the directive controller are not accessible in the app controller. How can one effectively utilize the variables from the directive controller within the app controller?

I appreciate any guidance on resolving this matter.

javascript angularjs angularjs-directive angularjs-scope angularjs-controller

Answer 1

Answer №1

Here is the solution you've been searching for.

After reviewing your Plunker code, I was able to achieve what you desired.

To accomplish the task at hand, Angular Events like $broadcast and $emit were utilized for Controller to Controller communication within Angular.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
//This section executes only after an event has been emitted by the child controller
  $scope.$on('SecondRun', function(event, data){
    console.log($scope.name);
     $scope.name =  $scope.name + 'First ';
  });
});

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    template: '<p>Hello {{name}}!</p>',
    controller: function($scope, $element){
      $scope.name = "Second ";
      //emiting event to parent scopes
      $scope.$emit('SecondRun',true);
    },
    link: function(scope, el, attr) {
      scope.name = scope.name + "Third ";
    }
  }
})

I trust that this explanation will be beneficial for you in resolving your issue.

Answer 2

Here is the solution you've been searching for.

After reviewing your Plunker code, I was able to achieve what you desired.

To accomplish the task at hand, Angular Events like $broadcast and $emit were utilized for Controller to Controller communication within Angular.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
//This section executes only after an event has been emitted by the child controller
  $scope.$on('SecondRun', function(event, data){
    console.log($scope.name);
     $scope.name =  $scope.name + 'First ';
  });
});

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    template: '<p>Hello {{name}}!</p>',
    controller: function($scope, $element){
      $scope.name = "Second ";
      //emiting event to parent scopes
      $scope.$emit('SecondRun',true);
    },
    link: function(scope, el, attr) {
      scope.name = scope.name + "Third ";
    }
  }
})

I trust that this explanation will be beneficial for you in resolving your issue.

directive in Angular ordering

Answer №1

Similar questions

Tips for customizing the CSS file of a React component imported from a UI framework

Dealing with Errors using Restangular

What is the best way to dissect emails using Haraka?

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Formatting decimals with dots in Angular using the decimal pipe

Angular view password reset in Laravel 5.1: Understanding CSRF token validation

Looking to alter the CSS of an ID element when hovering over a link on your website?

Tips for querying orchestrate.io

Check to see if a variable has been assigned a value in the form of a jquery

Step-by-step guide on creating a login functionality in Node using the Mean.io stack

The first time I tried using React-app, I encountered an error that read "[email protected] postinstall"

Learn how to make a mesh in Three Js React refract its environment while keeping the background hidden from the camera

Update the image within the svg tag

Incorporating string input values into a function

Can someone guide me on how to extract checkbox values in a post method using Angular

Having trouble adding items to an array within a Javascript promise

Tips for stopping Vue.js automatic merging of CSS classes

What is the best way to reset a dropdown list value in angular?

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

Using React to trigger a child component's function upon clicking a tab