NG If

by Rob Rothe

HTML

<div ng-app="app">

  <div ng-controller="LoginCtrl as ctrl">
    <div ng-if="!ctrl.logged_in">
      <button ng-click="ctrl.login()">
        Login
      </button>
    </div>
  </div>

  <div ng-controller="ContentCtrl as ctrl">
    <div ng-if="ctrl.logged_in">
      <h1>
    Content
    </h1>
    </div>
  </div>

JavaScript

angular
  .module('app', [])
  .controller('LoginCtrl', LoginCtrl)
  .controller('ContentCtrl', ContentCtrl);

function LoginCtrl($rootScope) {
  var vm = this;
  vm.login = login;
  vm.logged_in = false;

  function login() {
    vm.logged_in = true;
    $rootScope.$broadcast('logged_in', true);
  }
}

function ContentCtrl($scope) {
  var vm = this;
  vm.logged_in = false;

  $scope.$on('logged_in', function(event, data) {
    vm.logged_in = data;
  });
}