angular中阿里矢量图标使用（实现前端状态保存，刷新不变） 

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../lib/angular/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('myCtrl', function ($scope) {
            $scope.isOpen=localStorage.getItem("temp")||true;
            $scope.$watch('isOpen',function (newVal, oldVal) {
                localStorage.setItem("temp",newVal);
            }, true);
        });
    </script>
    <style>
        span{
            cursor: pointer;
            font-size: 26px !important;
        }
    </style>
</head>
<body ng-controller="myCtrl">
<div class="container">
    <span ng-class="{true: 'iconfont icon-yinliangkai', false: 'iconfont icon-yinliangguanbi1'}[isOpen]" ng-click="isOpen = !isOpen"></span>
</div>
</body>
</html>

　　

posted @ 2020-08-12 16:02  sct春天  阅读(311)  评论(0)    收藏  举报