The issue with Angular directive controller not recognizing 'this' reference

Question

The issue with Angular directive controller not recognizing 'this' reference

I'm struggling with the code snippet below. The vm.name variable doesn't seem to be working as expected. Additionally, why is the this keyword inside the controller not being detected? I've defined a closed scope for the directive, so what could be causing this issue?

Can anyone spot what I am doing incorrectly here?

var mod = angular.module('myApp', []);

mod.directive('myObj', myObject);

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController
  };

  function myController(){
    var vm = this;

    vm.name="vfdfbdn";
  }
}

javascript angularjs

Answer 1

Answer №1

If you want to access this in a controller within a directive, make sure to specify controllerAs: 'ctrl'. Then, in the template, you should prefix all names with {{ctrl.name}}, or alternatively utilize $scope like this:

function myController($scope) {
    $scope.name = "vfdfbdn";
}

Answer 2

If you want to access this in a controller within a directive, make sure to specify controllerAs: 'ctrl'. Then, in the template, you should prefix all names with {{ctrl.name}}, or alternatively utilize $scope like this:

function myController($scope) {
    $scope.name = "vfdfbdn";
}

Answer 3

Answer №2

function myComponent(){
  return {
      restrict: 'E',
      template: '<div>{{c.name}}</div>',
      scope: {},
      controller: myCtrl,
      controllerAs: 'c'
  };

  function myCtrl(){
    var vm = this;

    vm.name="vfdfbdn";
  }
};

To gain a deeper understanding on the topic, please refer to this related discussion.

Answer 4

function myComponent(){
  return {
      restrict: 'E',
      template: '<div>{{c.name}}</div>',
      scope: {},
      controller: myCtrl,
      controllerAs: 'c'
  };

  function myCtrl(){
    var vm = this;

    vm.name="vfdfbdn";
  }
};

To gain a deeper understanding on the topic, please refer to this related discussion.

Answer 5

Answer №3

In order to inform Angular about how you plan to reference the this from the controller in the view, you need to specify it.

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController,
      controllerAs: 'ctrl'
  };
}

By setting up controllerAs as 'ctrl', you can access everything that was assigned to this and named as vm within your controller using ctrl.

The reason I chose to use ctrl is to illustrate that there doesn't have to be a direct connection between the name used to refer to it in the view (defined with controllerAs) and the name assigned to this inside the controller function. It's common practice to differentiate between controllers by utilizing unique controllerAs references so it's clear which controller they pertain to in the view.

Answer 6

In order to inform Angular about how you plan to reference the this from the controller in the view, you need to specify it.

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController,
      controllerAs: 'ctrl'
  };
}

By setting up controllerAs as 'ctrl', you can access everything that was assigned to this and named as vm within your controller using ctrl.

The reason I chose to use ctrl is to illustrate that there doesn't have to be a direct connection between the name used to refer to it in the view (defined with controllerAs) and the name assigned to this inside the controller function. It's common practice to differentiate between controllers by utilizing unique controllerAs references so it's clear which controller they pertain to in the view.

Answer 7

Answer №4

Give this a shot:

const newObj = () => {
    return {
        restrict: 'E',
        templateUrl: 'my-obj.html',
        scope: {},
        bindToController: true,
        controller: objController
    };
}

objController.$inject = ['$scope'];

function objController($scope){
  var vm = this;
  vm.name="example";}

Answer 8

Give this a shot:

const newObj = () => {
    return {
        restrict: 'E',
        templateUrl: 'my-obj.html',
        scope: {},
        bindToController: true,
        controller: objController
    };
}

objController.$inject = ['$scope'];

function objController($scope){
  var vm = this;
  vm.name="example";}

The issue with Angular directive controller not recognizing 'this' reference

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for handling searches for strings and arrays of strings in JavaScript

What is the best way to transmit a 500x500 2D Integer Array using Websockets?

Tips for incorporating an outside model into vue.js with babylon js

React: Render function did not return any content. This typically indicates that a return statement is missing

Adjusting the size of wrapper functions

Setting the default value in a Reactive form on the fly: A step-by-step guide

What is the reason `addEventListener` does not work with a class method?

Customizing the Accordion Header Icon in Bootstrap UI when Tab is Expanded

JavaScript implementation of Twitter OAuth authentication

AngularJS - How to Deactivate List Items

Tips for passing a variable containing an image source from Node.js to a Jade file

Endless loop in React when using history.push and useEffect

How can you show the default calendar for a specific month and year in a Vue3 datepicker?

Activate the Bootstrap modal when the React site fully loads

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

Differences between count() and length() methods in Protractor

Generate a complete screenshot of a website using Chrome 59 through code

Enforce the splicing of the ng-repeat array with the utilization of track by

Violation of Content Security Policy directive has occurred

Utilizing jQuery's nextUntil() method to target elements that are not paragraphs