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

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 创建另一个范围。因此，当您在 show1 和 show2 中的 ng-controller 内时，您正在寻找的 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 获取子视图

Can not get the child views using angular.js

angularjs

angular-ui-router