$ provide.decorator $ controller返回throw undefined不是一个函数angularjs [英] $provide.decorator $controller return throw undefined is not a function angularjs

查看:80
本文介绍了$ provide.decorator $ controller返回throw undefined不是一个函数angularjs的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



这是我的文件树:




  • index.html

  • app.js

  • >


    • prod.html

    • cat.html


    • 控制器


      • prod.js

      • cat.js




    我希望当用户得到 / prod / 应用程序会动态地为控制器的逻辑加载(在视图中)prod.html和 prod.js

    所有这些逻辑都需要ng-route。


    Index.html

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

    Default.js 使用AngularJS v1.3.14的
    p>

      var app = angular.module('myApp',['ngRoute']); 
    $ b $ app.config(函数($ 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';
    }
    });

    //此代码抛出错误:
    // TypeError:undefined不是函数
    //在angular.min.js处:1
    //在r处(angular.min.js: 1)
    at at(angular.min.js:1)
    // at b(angular.min.js:1)
    // at b(angular.min.js :1)
    //在b(angular.min.js:1)
    //在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',['$ deleg ate',function($ delegate){
    //我想获取控制器名称并加载js文件。
    // return function(constructor,locals){
    // if(typeof constructor ==string){
    // locals。$ scope.loadControllerScript(constructor);
    //}
    // return $ delegate(constructor,locals);
    //}
    }]);
    });

    Prod.html

     < div class =rowdata-ng-controller =prodCtrl> 
    {{test}}
    < / div>

    Prod.js

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

    问题在于错误:undefined不是函数。 (请参阅Default.js中的代码)

    如果问题不明确,我将很乐意解释更多。

    解决方案

    在配置阶段,您不能要求实例(例如$ controller)。您只能在那里访问提供商。查看文档


    配置块 - 在提供商注册和配置阶段执行。只有提供者和常量
    可以注入到配置块中。这是为了防止
    在完全
    配置之前意外实例化服务。


    UPDATE:This works :


    $ b $ pre $ var app = angular.module(myApp,['ng'],['$ provide',function $提供){
    $ provide.decorator('$ controller',['$ delegate',function($ delegate){
    return function(constructor,locals){
    console.log 执行自定义代码...);
    return $ delegate(constructor,locals);
    }
    }])
    }]);

    请检查此演示


    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.

    解决方案

    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

    这篇关于$ provide.decorator $ controller返回throw undefined不是一个函数angularjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

  • 查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆