在 ngRoute 中使用嵌套控制器 - AngularJS

Question

我在 main.html 中有这个：

<div ng-controller="MainCtrl">
 <form ng-controller="SearchCtrl">
  <input ng-model="query" ng-change="changed(query)" />
 </form>
</div>

并且，index.html：

<html>
<head>
    <title>Dashboard</title>
</head>
<body ng-app="MyApp">
 <nav ng-controller="NavCtrl">
 ...
 </nav>
 <div ng-view></div>
</body>
</html>

而且，我的 ngRoute 配置如下：

module.config(function($routeProvider)){
 $routeProvider.when('/', {
  templateUrl: 'views/main.html',
  controller: 'SearchCtrl'
 });
}

我尝试在 SearchCtrl.js 中访问 $scope.$parent 寻找 $scope of MainCtrl 但我得到 undefined.

我尝试更改我的配置中的控制器，但是我无法访问 SearchCtrl。我该怎么办？

Answer 1

根据显示的结构，ng-view 中的所有内容都将在路由配置设置的控制器中.... SearchCtrl。

然后里面是 MainCtrl 并且里面是 SearchCtrl

的另一个（新实例）

所以应该将路由控制器更改为 MainCtrl 并删除 ng-controller="MainCtrl"

module.config(function($routeProvider)){
 $routeProvider.when('/', {
  templateUrl: 'views/main.html',
  controller: 'MainCtrl'
 });
}

main.html

<div>
 <form ng-controller="SearchCtrl">
  <input ng-model="query" ng-change="changed(query)" />
 </form>
</div>

Answer 2

main.html 已经在 SearchCtrl 范围内，您不需要在视图中再次定义范围。

那么，在"SearchCtrl"范围内的main.html中定义MainCtrl将不会以MainCtrl为父

因此从 main.html

中删除两个控制器

 <form>
 <input ng-model="query" ng-change="changed(query)" />
</form>

现在 index.html，将 MainCtrl 作为 ng-view 的父级

.......
<div ng-controller="MainCtrl">
 <div ng-view></div>
</div>
.......

现在尝试在 SearchCtrl 中访问 $scope.$parent 然后你就可以看到它了。

在 ngRoute 中使用嵌套控制器 - AngularJS

Use nested controllers in ngRoute - AngularJS

javascript

angularjs

ngroute