Javascript $injector在使用角度继承时不工作_Javascript_Angularjs_Angularjs Scope

Javascript $injector在使用角度继承时不工作

javascript angularjs

Javascript $injector在使用角度继承时不工作,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我正在学习AngularJS中的继承，所以我创建了一个示例来深入研究它。自上而下，它按照预期传递信息。但从孩子到父母的过程并非如此。以下是我正在使用的$injector。当我在代码中使用相同的代码时，它会中断，请让我知道我在这里做错了什么我的全部密码- <!doctype html> <html lang="en" ng-app="myApp"> <head> <title>Angular Inheritance</title>

我正在学习AngularJS中的继承，所以我创建了一个示例来深入研究它。自上而下，它按照预期传递信息。但从孩子到父母的过程并非如此。以下是我正在使用的

$injector

。当我在代码中使用相同的代码时，它会中断，请让我知道我在这里做错了什么

我的全部密码-

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <title>Angular Inheritance</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <style>
        html, body { text-align: center;}
        div { border: 1px solid red; margin: 2px; padding: 2px;}
        div div { border: 1px solid green; margin: 2px; padding: 2px;}
        div div div { border: 1px solid blue; margin: 2px; padding: 2px;}
    </style>
</head>
<body>
    <div ng-controller="frstCtrl">
        <p>I am <b>{{grandfather}}</b></p>
        <p><b>{{father}}</b> is my son.</p>
        <p><b>{{son}}</b> is my grandson.</p>
        <div ng-controller="secCtrl">
            <p>I am <b>{{father}}</b></p>
            <p><b>{{grandfather}}</b> is my father.</p>
            <p>{{son}} is my son</p>
            <div ng-controller="thrdCtrl">
                <p>I am <b>{{son}}</b></p>
                <p><b>{{father}}</b> is my father.</p>
                <p><b>{{grandfather}}</b> is my grandfather.</p>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var myApp = angular.module("myApp", []);

    myApp.controller('frstCtrl', ['$scope', '$injector', function($scope, $injector){
        $injector.invoke(thrdCtrl, this, {$scope: $scope});
        $injector.invoke(secCtrl, this, {$scope: $scope});
        $scope.grandfather = "Test GrandFather";
    }]);

    myApp.controller('secCtrl', ['$scope', '$injector', function($scope, $injector){
        $injector.invoke(thrdCtrl, this, {$scope: $scope});
        $scope.father = "Test Father";
    }]);

    myApp.controller('thrdCtrl', ['$scope', function($scope){
        $scope.son = "Test Son";
    }]);    
</script>


角遗传
html，正文{文本对齐：居中；}
div{边框：1px纯红色；边距：2px；填充：2px；}
div div{边框：1px纯绿色；边距：2px；填充：2px；}
div div div{边框：1px纯蓝色；边距：2px；填充：2px；}
我是{{祖父}
{{父亲}是我的儿子
{{儿子}是我的孙子
我是{{父亲}
{{祖父}是我的父亲
{{son}}是我的儿子
我是{{{儿子}
{{父亲}是我的父亲
{{祖父}是我的祖父
var myApp=angular.module（“myApp”，[]）；
myApp.controller（'fRSTCRL'，['$scope'，'$injector'，函数（$scope，$injector）{
$injector.invoke（thrdCtrl，this，{$scope:$scope}）；
$injector.invoke（secCtrl，this，{$scope:$scope}）；
$scope.grander=“测试祖父”；
}]);
myApp.controller（'secCtrl'，['$scope'，'$injector'，函数（$scope，$injector）{
$injector.invoke（thrdCtrl，this，{$scope:$scope}）；
$scope.father=“测试父亲”；
}]);
myApp.controller（'thrdCtrl'，['$scope'，函数（$scope）{
$scope.son=“测试子”；
}]);

您没有说它是如何崩溃的，但我假设您在

secCtrl

和

thrdCtrl

中遇到了引用错误

如果您查看本教程中的示例，您可以看到他们定义了一个名为

CarController

的函数，然后在

BMWController

中引用该函数（通过闭包）：

您需要在您的示例中执行类似的操作才能使其正常工作

例如，将函数控制器定义为命名函数，然后在Angular中设置它们应该可以：

var myApp = angular.module("myApp", []);

myApp.controller('frstCtrl', ['$scope', '$injector', frstCtrl]);
function frstCtrl($scope, $injector){
    $injector.invoke(thrdCtrl, this, {$scope: $scope});
    $injector.invoke(secCtrl, this, {$scope: $scope});
    $scope.grandfather = "Test GrandFather";
}

myApp.controller('secCtrl', ['$scope', '$injector', secCtrl]);
function secCtrl($scope, $injector){
    $injector.invoke(thrdCtrl, this, {$scope: $scope});
    $scope.father = "Test Father";
}

myApp.controller('thrdCtrl', ['$scope', thrdCtrl]);
function thrdCtrl($scope){
    $scope.son = "Test Son";
}

如果您不清楚如何引用命名函数（

frstCtrl

，

SRCTRL

，

thrdCtrl

）“之前”他们声明，看一看这篇关于变量和函数提升的博文：

Wow修复了它..根据建议，我将阅读这个提升术语..在stack上，你每天都会学到一些新东西：）我需要问一点..我有一行你提到的CarController，然后在BMWController中引用（通过闭包）我认为闭包是当一个函数位于另一个函数内部时。那么这里是闭包的情况。如果我的理解有误，请纠正我。我认为闭包是引用“范围上”的变量（注意：与角度范围无关）或引用在该函数外部声明的变量。例如，

CarController

变量在

BMWController

外部声明，但BMWController持有对它的引用。这样，

BMWController

在

CarController

变量上形成一个闭包。

var myApp = angular.module("myApp", []);

myApp.controller('frstCtrl', ['$scope', '$injector', frstCtrl]);
function frstCtrl($scope, $injector){
    $injector.invoke(thrdCtrl, this, {$scope: $scope});
    $injector.invoke(secCtrl, this, {$scope: $scope});
    $scope.grandfather = "Test GrandFather";
}

myApp.controller('secCtrl', ['$scope', '$injector', secCtrl]);
function secCtrl($scope, $injector){
    $injector.invoke(thrdCtrl, this, {$scope: $scope});
    $scope.father = "Test Father";
}

myApp.controller('thrdCtrl', ['$scope', thrdCtrl]);
function thrdCtrl($scope){
    $scope.son = "Test Son";
}