css Angular JS Events

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Angular JS Events相关的知识，希望对你有一定的参考价值。

var hello = angular.module('hello', []);

hello.controller('helloController', ['$rootScope', '$scope', function ($rootScope, $scope) {
     $scope.isLoggedIn = false;
     
     $rootScope.$on('userLogin', function (e) {
       $scope.isLoggedIn = true;
     });
     
     $rootScope.$on('userLogout', function (e) {
       $scope.isLoggedIn = false;
     });
}]);
<!doctype html>
<html  ng-app="app" lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
  <link rel="stylesheet" href="styles.css">
  <script src="loginController.js"></script>
  <script src="helloController.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="helloController">
    <h1 ng-show="isLoggedIn">Welcome! You are logged in!</h1>
    <h1 ng-show="!isLoggedIn">You are NOT logged in! Please login</h1>
  </div>
  <div ng-controller="loginController">
    <button ng-show="!loggedIn" ng-click="login()">Login</button>
    <button ng-show="loggedIn" ng-click="logout()">Logout</button>
  </div>
</body>
</html>
var login = angular.module('login', []);

login.controller('loginController', ['$rootScope', '$scope', function ($rootScope, $scope) {
  $scope.loggedIn = false;
  
  function login() {
    console.log('Login!')
    $scope.loggedIn = true;
    $rootScope.$broadcast('userLogin');
  }
  
  function logout() {
    console.log('Logout!')
    $scope.loggedIn = false;
    $rootScope.$broadcast('userLogout');
  }
  
  $scope.login = login;
  $scope.logout = logout;
  
}]);
var app = angular.module('app', ['hello', 'login']);
/* todo: add styles */

以上是关于css Angular JS Events的主要内容，如果未能解决你的问题，请参考以下文章

CSS3中的pointer-events

[Angular 2] Using events and refs

在 Angular 2/Angular-CLI 中将 CSS 排除在 JS 之外

如何将自定义css和js添加到angular 4

css Angular JS

Angular 2.0 和 D3.js 不在 svg 上应用 Css [重复]