Question

首先，ng-app应设置角度发生的区域，对吗？即使ng-controller之外有ng-app标记，也应该省略它们？

然而，当我在jsfiddle（link here）上测试时，似乎情况并非如此：

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello, {{name}}!
    <input ng-model="name">
  </div>
</div><br><br>
<div class="not-inside-my-app">
  <div ng-controller="MyCtrl">
    ...... Some Many other content in real case that I don't want angular to touch .......<br>
    So this is to test angular is not working here.<br>
    Hello, {{name}}!
    <input ng-model="name">
  </div>
</div><br><br>
<div ng-app="myApp">
  <div ng-controller="MyCtrl2">
    Hello, {{name}}!
    <input ng-model="name">
  </div>  
</div>

的Javascript

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

myApp.controller('MyCtrl', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
    $scope.name = 'Superhero';
}

myApp.controller('MyCtrl2', ['$scope', MyCtrlFunction2]);
function MyCtrlFunction2($scope) {
    $scope.name = 'Non-superhero';
}

角度代码仍在div中间工作。我的ng-app概念错了吗？或者我错过了什么来限制范围？

P.S。我知道我可以通过使用ng-controller来控制范围，但是对于我知道我不需要angularJS的部分进行扫描似乎是浪费资源。

Answer 1

由于ng-app属性已添加到body标记，这就是所有控制器都在运行的原因。

由于angular会考虑第一个ng-app属性并忽略其他ng-app属性。上面的代码正在运行。

注意：虽然html部分中编写的代码不包含body标签。您可以通过单击小提琴网站的html部分中的齿轮图标来插入正文标记。这是添加到body标签中添加ng-app属性的主要原因。谢谢你指出杜尔加

Answer 2

从html部分删除正文标记<body ng-app="myApp">，jsfiddle没有问题。

Answer 3

似乎JS jsFiddle存在一些问题，尝试在本地机器中运行相同的示例它将无法工作或在这里得到答案： https://www.w3schools.com/code/tryit.asp?filename=FEYVPGYHZAY5

AngularJS在ng-app范围之外运行？

3 个答案: