Question

我有一些嵌套控制器，我需要根据某些条件显示子视图但无法获取它。我在下面提供我的代码。

parent.html：

<div>
  <h1>Welcome</h1>
  <div ng-show="show1">
    <div ng-include="'show1.html'"></div>
  </div>
  <div ng-show="show2">
    <div ng-include="'show2.html'"></div>
  </div>
</div>

此处从show1.html开始向用户显示。

parentController.js：

var dept=angular.module('Spesh');
dept.controller('parentController',function($scope,$http,$state,$window){
    $scope.show1=true;
    $scope.show2=false;
});

当用户点击show1.html应显示的按钮时，在show2.html代码内

。

show1.html：

<div ng-controller="show1Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="getShow2();">show1</button>
</div>

show1Controller.js

var dept=angular.module('Spesh');
dept.controller('show1Controller',function($scope,$http,$state,$window){
    $scope.messg='Show1';
    $scope.getShow2=function(){
      $scope.parent.show1=false;
      $scope.parent.show1=true;
    }
});

但它不会那样发生。在这里我需要当用户点击按钮时相应的视图应该附加在父视图中。 my full Plunkr code就在这里。

Answer 1

您需要使用$parent升级两级。 ng-include在父级下创建新范围，每个模板中的ng-controller创建另一个范围。因此，如果您位于ng-controller和show1中的show2范围内，那么您要查找的parent会提升两级。

这是一个吸虫：

https://plnkr.co/edit/6GWJjf5KcE2Dr9sqQOep?p=preview

Answer 2

您可能应该尝试使用指令或组件来完成此任务。但是如果必须使用当前结构，则应该让父控制器实现一个切换两个模板的函数。

/* parentController.js */
var dept = angular.module('Spesh');
dept.controller('parentController', function($scope, $http, $state, $window) {
  $scope.show1 = true;
  $scope.show2 = false;
  $scope.toggleShow = function() {
    $scope.show1 = !$scope.show1;
    $scope.show2 = !$scope.show2;
  }
});

/* showController1.js */
var dept = angular.module('Spesh');
dept.controller('show1Controller', function($scope, $http, $state, $window) {
  $scope.messg = 'Show1';
  $scope.doToggle = function() {
    $scope.$parent.toggleShow();
  }
});

/* showController2.js */
var dept = angular.module('Spesh');
dept.controller('show2Controller', function($scope, $http, $state, $window) {
  $scope.messg = 'Show2';
  $scope.doToggle = function() {
    $scope.$parent.toggleShow();
  }
});


/* show1.html */
<div ng-controller="show1Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="doToggle();">Toggle</button>
</div>

/* show2.html */
<div ng-controller="show2Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="doToggle();">Toggle</button>
</div>

无法使用angular.js获取子视图

2 个答案: