Question

我需要一些帮助。我在Angular.js中使用ng-if加载子视图时遇到了一些问题。我在下面解释我的代码。

parent.htm：

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

parentController.js：

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

    $scope.show1=true;
    $scope.show2=false;

});

show1.html：

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

show1Controller.js：

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

此处最初会显示show1.html，当用户点击该按钮时，show2.html会显示，show1.html将不会显示。

show2.html：

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

show2Controller.js：

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

这里我不能使用ng-show/ng-hide，因为我需要根据各自的视图加载不同的控制器页面。在这里我需要当用户点击按钮时将显示相应的视图。 Here is my plunkr code。请帮忙。

无法在Angular.js

0 个答案: