javascript - angular.js是如何做到注入参数的
怪我咯
怪我咯 2017-04-10 14:37:02
[JavaScript讨论组]

像这种代码

app.controller('TestController', function ($scope, $rootScope) {
    ...
});

我只在函数里声明了这两个参数$scope$rootScope。在使用的时候,这两个参数就已经被框架注入实际的值了,它是怎么做到的?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
黄舟

思路请参考Gemini的回答,我写了一个简单的实现,仅供参考:

var injectMap = {
    $scope: { foo: "bar" },
    $rootScope: { rootFoo: "rootBar" }
};

var controller = function(name, func) {
    if (typeof func == "function") {
        var funcString = func.toString(), funcArgs = [];
        if (/function\s*\((.*?)\)\s*{+/gi.test(funcString)) {
            var match = /function\s*\((.*?)\)\s*{+/gi.exec(funcString), argsDefine = match[1];
            if (argsDefine) {
                var args = argsDefine.split(",");
                for (var i = 0, j = args.length; i < j; i++) {
                    var arg = args[i].trim();
                    if (injectMap[arg]) {
                        funcArgs[i] = injectMap[arg];
                    }
                }
            }
        }
        func.apply(null, funcArgs);
    }
};

controller("TestController", function ($scope, $rootScope) {
    console.log($scope, $rootScope);
});

controller("TestController2", function () {
    console.log("No Arguments");
});
迷茫

controller的参数是规定好的,官方文档中有

PHPz

这个地址应该更好访问。

对于 angular的依赖注入主要是主要是依靠的$injector服务,具体实现其实是 在angular 中 providerCache instanceCache 2个cache 初始化ng后providerCache 中放入各个基本服务,当服务被使用 后加入到instanceCache 中 以后直接到instanceCache中查找。 你可以去看angular源码的createInternalInjector 这个方法,了解一下大致的执行过程,你就明白了。当然我觉得原理也没必要非得特别明白,知道怎么用 就好了。

大家讲道理

angular做DI的时候有个要求(当然,就是这种代码风格下的,不是事先写好依赖的):不能压缩代码
从这条要求可以知道大致的思路如下(我没读过源码):
angular的回调函数拿到之后用toString()获取回调函数的源码,再用正则表达书提取出它的参数,然后根据参数名注入相应的对象。(这也可以解释为什么它的参数要求$开头的问题)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号