角度显示/隐藏视图之外的div

时间:2017-05-05 14:50:14

标签: javascript html angularjs

尝试在ng-view之外隐藏/显示div但无法访问它。

主控制器

var vm = this;
vm.showMyDiv = false;

HTML

<body ng-app="app" ng-controller="ManinCtrl as main">
    <div ng-show="vm.showMyDiv">
      my test div
    </div>
    <div class="ng-view"></div>
<body>

ng-view controller

var vm = this;
vm.hideLoader = true;

我如何访问它,我尝试使用$ scope但它不起作用

1 个答案:

答案 0 :(得分:2)

您正在声明控制器ng-controller="ManinCtrl as main",因此您需要在属性前加main而不是vm

<div ng-show="main.showMyDiv">

工作示例:

angular.module('app', []).controller('mainCtrl', function() {
  var main = this;
  main.showMe = false;
  main.toggleShow = function() {
    main.showMe = !main.showMe;
  };
}).controller('ctrl', function() {
  var vm = this;
  vm.exampleText = "I'm inner text in the controller :)";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as main">
  <div ng-show="main.showMe">HELLO!!</div>
  
  <hr>
  
  <div ng-controller="ctrl as vm">
    <div ng-bind="vm.exampleText"></div>
    <button ng-click="main.toggleShow()">Click Here</button>
  </div>
</div>