Question

我是Angular JS的初学者。我知道在js文件中需要以下声明来使角度JS控制器工作。

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

app.controller('ctrlOne', function(){
});

但最近从互联网上获得了一些代码，其中没有针对上述应用和控制器进行声明。但是只定义了控制器功能，但工作正常，但不是我的情况。

function ctrlOne($scope){

};

function ctrlTwo($scope){

};

请在下面找到我的代码并输出。请纠正我。

<div ng-app>
    <input type="text" ng-model="data.message" />
    <h1>{{ data.message }}</h1>

    <div ng-controller="ctrlOne">
        <input type="text" ng-model="data.message" />
        <h1>{{ data.message }}</h1>
    </div>

    <div ng-controller="ctrlTwo">
        <input type="text" ng-model="data.message" />
        <h1>{{ data.message }}</h1>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="App.js"></script>

App.js：

function ctrlOne($scope){

};

function ctrlTwo($scope){

};

任何人都可以帮我弄清楚我哪里出错了。欢迎您的建议。

请找到JSFIDDLE链接：Have done above coding here

Answer 1

初始化角度应用有两种方法。一种是在html中定义git，或者您可以手动引导角应用。您需要确定应用程序初始化的位置。因为在你的html中你正在使用ng-app。你应该提供应用名称。

Answer 2

将html更改为包含myApp模块名称，如下所示：

<div ng-app="myApp">
...
  <div ng-controller="ctrlOne">
      <input type="text" ng-model="data.message" />
      <h1>{{ data.message }}</h1>
  </div>
...
</div>

Angular需要知道 root 模块的名称。 ng-app指令仅指定：

使用此指令自动引导AngularJS应用程序。该 ngApp指令指定应用程序的根元素，并且是通常放置在页面的根元素附近 - 例如在...上 <body>或<html>代码。

我的Angular JS应用程序中出现多个Controller抛出错误

2 个答案: