Accessing the angular controller that is defined within a directive

Question

Accessing the angular controller that is defined within a directive

I am currently trying to wrap ng-controller within a directive and access its attributes in the html, but unfortunately, I am facing difficulties with making it work.

Below is an excerpt of my app.js file:

angular.module('myModule', [])
.directive('myDirective', function()
{
   transclude: true,
   template: '<div ng-controller="MyController as ctrl" ng-transclude></div>'
});

Despite my efforts, I am unable to retrieve any attribute (e.g., message) defined within MyController. The following code snippet on my html page fails to display the message:

<my-directive>
    {{ ctrl.message }}
</my-directive>

Could there be something that I am overlooking here?

javascript angularjs

Answer 1

Answer №1

angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
  $scope.greeting = 'Greetings from Scope';
  $scope.myself = this;
  this.scopeData = $scope;
  this.message = 'Hey there from Controller';
  $scope.onClick = function(scope) {
    alert('Alert message!!!');
  }
  this.onClick = function(){
    alert('Controllers click!!!')
  }
})
.directive('myCustomDirective', function() {
  return {
    restrict:'E',
    scope: {
      controller: "="
    },
    transclude: true,
    template: '<div ng-click="controller.scopeData.onClick()">'
      +'Scope text:{{controller.scopeData.greeting}}<br/>Controller text: {{controller.message}}<br />'
      + '</div><div ng-click="controller.onClick()">Click me!</div>';
  }
});

If you need guidance, consider following this approach... Plunker: view complete code

Answer 2

angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
  $scope.greeting = 'Greetings from Scope';
  $scope.myself = this;
  this.scopeData = $scope;
  this.message = 'Hey there from Controller';
  $scope.onClick = function(scope) {
    alert('Alert message!!!');
  }
  this.onClick = function(){
    alert('Controllers click!!!')
  }
})
.directive('myCustomDirective', function() {
  return {
    restrict:'E',
    scope: {
      controller: "="
    },
    transclude: true,
    template: '<div ng-click="controller.scopeData.onClick()">'
      +'Scope text:{{controller.scopeData.greeting}}<br/>Controller text: {{controller.message}}<br />'
      + '</div><div ng-click="controller.onClick()">Click me!</div>';
  }
});

If you need guidance, consider following this approach... Plunker: view complete code

Accessing the angular controller that is defined within a directive

Answer №1

Similar questions

React Navigation Error: Exceeding Maximum Update Depth after User Login

Problems encountered while trying to generate an API request in AngularJS

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

Track the movement of the mouse to illuminate objects in a three.js environment

Ways to retrieve a variable from a service within a controller

Learn how to resolve the issue of "Property 'item' does not exist on type 'never'." in Angular using TypeScript with the following code snippet

What is the best method to display a component using a string in Vue 3?

The created hook does not execute when navigating to the same route with a different query parameters

Submitting data to an external PHP file using the JavaScript function $.post

Leveraging AJAX Response for Ending a Parallel Query

Identify the opening of the console for the background page of a Chrome

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

Learn how to use jQuery's .addClass() method to specify custom CSS styling

What is the best way to transform an array of objects in JavaScript?

The if-else statement doesn't seem to be functioning correctly once the else condition is included

Is there a way to replace jQuery's .submit() method with Angular?

Just initiate an API request when the data in the Vuex store is outdated or missing

Implementing tooltips that require a click instead of hovering

The chaos of Typescript decorators

A single feature designed to handle various elements