从AngularJS控制器,我怎么解决这个模块(动态NG-控制器)中定义的另一个控制器的功能? [英] From an AngularJS controller, how do I resolve another controller function defined in the module (dynamic ng-controller)?

查看:298
本文介绍了从AngularJS控制器,我怎么解决这个模块(动态NG-控制器)中定义的另一个控制器的功能?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

自我解释小提琴: http://jsfiddle.net/5FG2n/6/

我需要动态地选择在控制器基于它的名字作为一个字符串运行时使用。该字符串将从配置对象读取。

InnerCtrlAsLocalVariable 的code下面我现在有一个分配给 $ scope.dynamicCtrl 。而是如何做我分配 InnerCtrlFromModule 来的财产?

查看:

 < D​​IV NG-应用='应用'NG控制器='OuterCtrl'>
    < D​​IV NG控制器='dynamicCtrl'>
        {{信息}}
    < / DIV>
< / DIV>

JS:

  VAR InnerCtrlAsLocalVariable = ['$范围',
    功能($范围){
        $ scope.message从控制器作为本地变量 - 不想'=
    }
];angular.module('应用',[])    .controller('OuterCtrl',['$范围',        功能($范围){
            //不是这样做的?
            $ scope.dynamicCtrl = InnerCtrlAsLocalVariable;            // ...我想要做这样的事情:
            // $ scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');
        }
    ])    .controller('InnerCtrlFromModule',['$范围',
        功能($范围){
            $ scope.message ='从模块定义控制器 - 要';
        }
    ]);


解决方案

您可以尝试编写自定义指令:

  .directive(ngDynamicController功能($编译){
        返回{
            终端:真实,
            优先级:1000,
            链接:功能(范围,元素,属性){
                VAR controllerProperty =范围[attr.ngDynamicController]
                element.attr('NG控制器,controllerProperty);
                element.removeAttr(NG动态控制器);
                $编译(元)(范围);
            }
        }
    })

如果您需要更多的信息,我们为什么要添加端子:真正的优先级:1000 。看看我的回答这个问题:<一href=\"http://stackoverflow.com/questions/19224028/add-directives-from-directive-in-angularjs/19228302#19228302\">Add在AngularJS

从指令的指令

演示

您可以尝试注入它作为一个值:

  angular.module(应用,[])
        .value的('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl',['$范围,InnerCtrl',
        功能($范围,InnerCtrl){//注入值到函数
            $ scope.dynamicCtrl = InnerCtrl;
        }
    ])

演示

或者使用$注射器动态解析:

  VAR InnerCtrlAsLocalVariable = ['$范围',
            功能($范围){
                $ scope.message ='从模块定义控制器 - 要';
            }
        ]    angular.module('应用',[])
        .value的('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl',['$范围,$喷油器',
            功能($范围,$注射器){//注入$注射器服务。                //动态地解决价值
                $ scope.dynamicCtrl = $ injector.get('InnerCtrl');            }
        ])        .controller('InnerCtrlFromModule',InnerCtrlAsLocalVariable)

演示

您可以使用 $控制器服务动态创建控制器实例,从这个实例我们可以通过检索构造函数构造属性

  angular.module(应用,[])
        .controller('OuterCtrl',['$范围,$控制器,
            功能(范围,$控制器){                scope.dynamicCtrl = $控制器('InnerCtrlFromModule',{$范围:$范围新的()})构造函数;            }
        ])        .controller('InnerCtrlFromModule',['$范围',函数($范围){
                $ scope.message ='从模块定义控制器 - 要';
            }])

演示

Self explanatory fiddle: http://jsfiddle.net/5FG2n/6/

I need to dynamically choose the controller to use at runtime based on its name as a string. The string will be read from a config object.

In the code below I currently have InnerCtrlAsLocalVariable assigned to $scope.dynamicCtrl. How instead do I assign InnerCtrlFromModule to the property?

View:

<div ng-app='app' ng-controller='OuterCtrl'>
    <div ng-controller='dynamicCtrl'>
        {{message}}
    </div>
</div>

JS:

var InnerCtrlAsLocalVariable = ['$scope',
    function($scope) {
        $scope.message = 'from controller as local variable - do not want'
    }
];

angular.module('app', []) 

    .controller('OuterCtrl', ['$scope', 

        function($scope) {
            // Instead of doing this...
            $scope.dynamicCtrl = InnerCtrlAsLocalVariable;

            // ...I want to do something like this:
            // $scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');                                               
        }
    ])

    .controller('InnerCtrlFromModule', ['$scope',
        function($scope) {
            $scope.message = 'from controller defined in module - want';
        }
    ]);

解决方案

You could try writing custom directive:

.directive("ngDynamicController",function($compile){
        return {
            terminal: true, 
            priority: 1000,
            link:function(scope,element,attr){
                var controllerProperty = scope[attr.ngDynamicController];
                element.attr('ng-controller', controllerProperty);
                element.removeAttr("ng-dynamic-controller"); 
                $compile(element)(scope);
            }
        }
    })

If you need more information why we have to add terminal: true and priority: 1000. Check out my answer to this question: Add directives from directive in AngularJS

DEMO

You could try injecting it as a value:

angular.module('app', [])
        .value('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl', ['$scope','InnerCtrl', 
        function($scope, InnerCtrl) { //inject the value into the function
            $scope.dynamicCtrl = InnerCtrl;                                          
        }
    ])

DEMO

Or use $injector to resolve dynamically:

var InnerCtrlAsLocalVariable = ['$scope',
            function($scope) {
                $scope.message = 'from controller defined in module - want';
            }
        ]

    angular.module('app', [])
        .value('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl', ['$scope','$injector', 
            function($scope, $injector) { //inject the $injector service.

                // resolve the value dynamically
                $scope.dynamicCtrl = $injector.get('InnerCtrl');

            }
        ])

        .controller('InnerCtrlFromModule', InnerCtrlAsLocalVariable)

DEMO

You can use $controller service to create the controller instance dynamically, from that instance we can retrieve the constructor function using constructor property

 angular.module('app', [])
        .controller('OuterCtrl', ['$scope','$controller', 
            function(scope, $controller) {

                scope.dynamicCtrl = $controller('InnerCtrlFromModule',{$scope:scope.$new()}).constructor;

            }
        ])

        .controller('InnerCtrlFromModule',['$scope', function($scope) {
                $scope.message = 'from controller defined in module - want';
            }])

DEMO

这篇关于从AngularJS控制器,我怎么解决这个模块(动态NG-控制器)中定义的另一个控制器的功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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