javascript - $provide.decorator $controller return throw undefined is not a function angularjs

I want to add dynamic controller's script when the controller loaded via view.

Here is my files tree:

index.html
app.js
views
- prod.html
- cat.html
controllers
- prod.js
- cat.js

I want that when the user get /prod/ URL the app will load (in the view) the prod.html and the prod.js for the controller's logic dynamically.
All this logic required ng-route of course.

Index.html

<body data-ng-app="myApp">
  <div data-ng-view=""></div>  
</body>

Default.js using AngularJS v1.3.14

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

app.config(function ($routeProvider, $locationProvider, $controllerProvider, $provide) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    app.registerCtrl = $controllerProvider.register;

    $routeProvider.
      when('/:name', {
          templateUrl: function (urlAttr) {
              return '/views/' + urlAttr.name + '.html';
          }
      });

    // This code throw error: 
    //TypeError: undefined is not a function
    //at angular.min.js:1
    //at r (angular.min.js:1)
    //at at (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at $get.t (angular.min.js:1)
    //at angular.min.js:1
    //at p.$get.p.$eval (angular.min.js:1)
    $provide.decorator('$controller', ['$delegate', function ($delegate) {
      // I want to get the controller name and than load the js file.
      //    return function (constructor, locals) {
      //        if (typeof constructor == "string") {
      //            locals.$scope.loadControllerScript(constructor);
      //        }
      //        return $delegate(constructor, locals);
      //    }
    }]);
});

Prod.html

<div class="row" data-ng-controller="prodCtrl">
{{test}}  
</div>

Prod.js

app.registerCtrl('prodCtrl', function ($scope) {
    $scope.test = '';
});

The problem is the error: "undefined is not a function". (See the code in Default.js)
If the question is not clear, I will be happy to explain more.

I want to add dynamic controller's script when the controller loaded via view.

Here is my files tree:

index.html
app.js
views
- prod.html
- cat.html
controllers
- prod.js
- cat.js

I want that when the user get /prod/ URL the app will load (in the view) the prod.html and the prod.js for the controller's logic dynamically.
All this logic required ng-route of course.

Index.html

<body data-ng-app="myApp">
  <div data-ng-view=""></div>  
</body>

Default.js using AngularJS v1.3.14

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

app.config(function ($routeProvider, $locationProvider, $controllerProvider, $provide) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    app.registerCtrl = $controllerProvider.register;

    $routeProvider.
      when('/:name', {
          templateUrl: function (urlAttr) {
              return '/views/' + urlAttr.name + '.html';
          }
      });

    // This code throw error: 
    //TypeError: undefined is not a function
    //at angular.min.js:1
    //at r (angular.min.js:1)
    //at at (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at b (angular.min.js:1)
    //at $get.t (angular.min.js:1)
    //at angular.min.js:1
    //at p.$get.p.$eval (angular.min.js:1)
    $provide.decorator('$controller', ['$delegate', function ($delegate) {
      // I want to get the controller name and than load the js file.
      //    return function (constructor, locals) {
      //        if (typeof constructor == "string") {
      //            locals.$scope.loadControllerScript(constructor);
      //        }
      //        return $delegate(constructor, locals);
      //    }
    }]);
});

Prod.html

<div class="row" data-ng-controller="prodCtrl">
{{test}}  
</div>

Prod.js

app.registerCtrl('prodCtrl', function ($scope) {
    $scope.test = '';
});

The problem is the error: "undefined is not a function". (See the code in Default.js)
If the question is not clear, I will be happy to explain more.

Share Improve this question edited Mar 20, 2017 at 7:34 asked Mar 1, 2015 at 9:17 Mosh Feu 29.4k18 gold badges93 silver badges141 bronze badges

Can you show the code where you provide the loadControllerScript function? – Preslav Rachev Commented Mar 1, 2015 at 15:09
It's not relevant. The exception thrown in "$provide.decorator('$controller', ['$delegate', function ($delegate) {" - before the "loadControllerScript". I will update my question. – Mosh Feu Commented Mar 2, 2015 at 5:47

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

You cannot ask for instances (e.g $controller) during the configuration phase. You can only access providers there. Check the docs:

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

UPDATE: This works:

var app = angular.module("myApp", ['ng'], ['$provide', function($provide) {
    $provide.decorator('$controller', ['$delegate',  function($delegate) {
        return function(constructor, locals) {
            console.log("executing custom code ...");
            return $delegate(constructor, locals);
        }
    }])
}]);

Check this demo

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - $provide.decorator $controller return throw undefined is not a function angularjs - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)