尽管控制器可用角JS异常触发错误(Angular JS thowing error even tho

2019-10-21 05:26发布

我是新来的角JS,我想一些例子...但我得到一个非常奇怪的异常,当我尝试加载我的应用程序...

这里是我的角度JS代码:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="JS/Controllers.js"></script>
    <body ng-app="myapp">
            <div ng-controller="HelloController">
                <h2>Hello {{helloTo.title}} !</h2>
            </div>
            <div ng-controller="MyController" >
                <span ng-show="myData.showIt"></span>
                <span ng-hide="myData.showIt"></span>
            </div>
        </body>

这里是我的控制器代码:

angular.module("myapp", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp1", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

误差由萤火虫记录:错误:[NG:AREQ] http://errors.angularjs.org/1.2.5/ng/areq?p0=MyController&p1=not%20a%20function%2C%20got%20undefined 的https:// AJAX .googleapis.com / AJAX /库/ angularjs / 1.2.5 / angular.min.js 83线

我采用了棱角分明的js 1.2.5版本...

Answer 1:

您将创建两个不同的角度模块 ,每一个控制器,而不是用两个不同控制器的一个单独的模块 ,这是你想做的事,只是改变你的代码以匹配该语法的内容:

angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        // ...
    })
    .controller("MyController", function($scope) {
        // ...
    });

或者这一个:

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

myApp.controller("HelloController", function($scope) {
    // ...
});

myApp.controller("MyController", function($scope) {
    // ...
});


Answer 2:

你有两个模块,MYAPP和myapp2。 myapp2有你试图MYAPP模块,这是不可能的范围内使用控制器myController的。

您可以定义MYAPP模块内myController的。 http://jsfiddle.net/g35tpy5q/1/

var myapp=angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

myapp.controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

或注入的myapp模块内的模块myapp2 http://jsfiddle.net/g35tpy5q/2/

angular.module("myapp2", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});
angular.module("myapp", ["myapp2"]).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );


Answer 3:

这里有2个问题。

一,是你定义的2个不同的模块:“MYAPP”和“myapp1”。 也许它只是一个错字,以及你的意思是他们是一样的。

然后,第二个问题是,你正在重新定义当您使用模块[]第二次:

angular.module("myapp", [])

这是一个模块的制定者

相反,使用不带一个模块吸气 []

angular.module("myapp").controller("MyController", ...)


Answer 4:

下面将工作。 你心里有裸露是什么,每次你定义一个新的angular.module如果你把angular.module('myapp', [])你要定义一个没有任何其他模块的知识了新的空间。 如果你然后做angular.module('myapp').controller()将在控制器接到原来的内存模块。 因此在其范围之中。

注意的ommission []定义控制器时。 在[]是用于依赖注入,但在以下方面angular.module限定一个完全新的模块空间。

下面是一种真正正确modularise角JS。

angular.module("myapp.hello", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp.my", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

angular.module("myapp", [
    'myapp.hello',
    'myapp.my']);


文章来源: Angular JS thowing error even though controller is available