ng-controller does not function properly when assigned a variable as its parameter

Question

ng-controller does not function properly when assigned a variable as its parameter

Every time I attempt to insert a variable into the ng-controller parameter, I receive the following error message:

" Error: [ng:areq] Argument 'curController' is not a function, got string

    <div  ng-include="templates[selected-1]" ng-controller='curController'>

controller

  for(i=0;i<$scope.cours.length;i++){
    switch($scope.cours[i].type){
        case "c1":
        $scope.controllers[i]="cours1Display"
        $scope.templates[i]="views/cours/cours1.html"
        break;
        case "c2":
        $scope.controllers[i]="cours2Display"
        $scope.templates[i]="views/cours/cours2.html"
        break;
        case "c3":
        $scope.controllers[i]="cours3Display"
        $scope.templates[i]="views/cours/cours3.html"
        break;
        case "c4":
        $scope.controllers[i]="cours4Display"
        $scope.templates[i]="views/cours/cours4.html"
        break;
        case "exo1":
        $scope.controllers[i]="exo1Display")
        $scope.templates[i]="views/exos/exo1Decorator.html"
        break;
        case "exo2":
        $scope.controllers[i]="exo2Display"
        $scope.templates[i]="views/exos/exo2Decorator.html"
        break;
        case "exo3":
        $scope.controllers[i]="exo3Display"
        $scope.templates[i]="views/exos/exo3Decorator.html"
        break;
    }

curController =   $scope.controllers[0]

$scope.pageChanged=function(){
    alert($scope.selected)
    curController =   $scope.controllers[$scope.selected-1]
}

javascript angularjs ng-controller

Answer 1

Answer №1

Have you attempted using brackets? It's important to assign 'curController' to $scope.curController.

<div  ng-include="templates[selected-1]" ng-controller='{{curController}}'>

It appears that Angular does not natively support dynamic controller names, but you have the option to create a custom directive to define your own controller.

angular.module('app', [])
  .directive('myController', function($controller) {

    return {
      restrict: 'A',
      priority: 600,
      scope: true,
      link: function(scope, element, attr) {
        console.log(scope, element, attr);
         var locals = {
              $scope: scope,
              $element: element,
              $attrs: attr,              
            };
         element.data('$myController', $controller(attr['myController'], locals));
      }
    };

  })
  .controller('CustomController', function($scope) {
    console.log($scope);
    $scope.value = 'My custom value in my custom controller.'
  })

;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app" ng-init="curController='CustomController'">
  <div my-controller="{{curController}}">value={{value}}</div>

Answer 2

Have you attempted using brackets? It's important to assign 'curController' to $scope.curController.

<div  ng-include="templates[selected-1]" ng-controller='{{curController}}'>

It appears that Angular does not natively support dynamic controller names, but you have the option to create a custom directive to define your own controller.

angular.module('app', [])
  .directive('myController', function($controller) {

    return {
      restrict: 'A',
      priority: 600,
      scope: true,
      link: function(scope, element, attr) {
        console.log(scope, element, attr);
         var locals = {
              $scope: scope,
              $element: element,
              $attrs: attr,              
            };
         element.data('$myController', $controller(attr['myController'], locals));
      }
    };

  })
  .controller('CustomController', function($scope) {
    console.log($scope);
    $scope.value = 'My custom value in my custom controller.'
  })

;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app" ng-init="curController='CustomController'">
  <div my-controller="{{curController}}">value={{value}}</div>

ng-controller does not function properly when assigned a variable as its parameter

Answer №1

Similar questions

How to render a div in HTML with full CSS styling applied

When the scope changes, the AngularJS variables in the view are not updating accordingly

How to mute a particular warning in development mode with Next.js

Utilizing AngularJS: Conditionally rendering ngIf within an array of objects containing unique properties

Issues with connecting to Socket.IO in Cordova app

Unable to interpret Python/Django-generated JSON object on client side

What is the method for including a placeholder with sequential numbering?

Does the Error page in Next JS 13 fail to properly manage fetch API errors?

What is the process for performing the "extract function" refactoring in JavaScript?

Responsive Tabs with Material-UI

The ViewChild instance is currently undefined

Effortlessly switching back and forth between OData and WebAPI in breezejs

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

Displaying saved locations on Google Maps API

What is the purpose of employing useMemo in the Material-UI autocomplete documentation?

Blocking of Node.js Promises

Navigation bar transforms color once a specific scroll position is reached

Incorporating graphics into a React component

Transform a Mongoose object into a specific JSON schema

Transitioning NodeJS from local development to a live website