如何使用AngularJS

你好，我的平均堆棧我工作，我想顯示本地存儲的值到theme.I現在用的是Metronic的主題如何使用AngularJS

頁眉，以顯示標題localStorage的數據。

其實本地存儲的數據是鑑於file.everything訪問工作正常，但

我要查看在頭localStorage的數據沒有顯示。

我正在使用這樣的。

{{adminData.email}}

它沒有在標題中顯示管理員的電子郵件。

但是，當我使用相同{{adminData.email}}在是

顯示admin.I的郵件不知道什麼是問題內容文件。

這裏是index.ejs文件。

<!DOCTYPE html> 
<style type="text/css"> 
.page-spinner-bar { 
    display: none; 
}</style> 
<html lang="en" ng-app="myApp"> 
<!--<![endif]--> 
<!-- BEGIN HEAD --> 
<head> 
<title>Ditro Infotech App</title> 

<meta charset="utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta content="width=device-width, initial-scale=1" name="viewport"/> 
<meta content="" name="description"/> 
<meta content="" name="author"/> 

<!-- BEGIN GLOBAL MANDATORY STYLES --> 
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/> 
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/> 
<link href="../../css/style.css" rel="stylesheet" type="text/css"/> 


<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files) --> 
<link id="ng_load_plugins_before"/> 
<!-- END DYMANICLY LOADED CSS FILES --> 

<!-- BEGIN THEME STYLES --> 
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag --> 
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/> 
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/> 
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/> 
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/> 
<!-- END THEME STYLES --> 

<link rel="shortcut icon" href="favicon.ico"/> 
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> 

    <!-- BEGIN CORE JQUERY PLUGINS --> 
    <!--[if lt IE 9]> 
    <script src="../../assets/global/plugins/respond.min.js"></script> 
    <script src="../../assets/global/plugins/excanvas.min.js"></script> 
    <![endif]--> 
    <script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> 
    <!-- END CORE JQUERY PLUGINS --> 

    <!-- BEGIN CORE ANGULARJS PLUGINS --> 
    <script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script> 
    <script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script> 


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script> 
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script> 
    <script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script> 



     <script src="js/module/module.js"></script> 
     <script src="js/controller/controller.js"></script> 
    <!-- END CORE ANGULARJS PLUGINS --> 

    <!-- BEGIN APP LEVEL JQUERY SCRIPTS --> 
    <script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script> 
    <script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script> 
    <script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script> 
    <!-- END APP LEVEL JQUERY SCRIPTS --> 

    <script type="text/javascript"> 
     /* Init Metronic's core jquery plugins and layout scripts */ 
     $(document).ready(function() { 
      Metronic.init(); // Run metronic theme 
      Metronic.setAssetsPath('../../assets/'); // Set the assets folder path   
     }); 
    </script> 

</head> 

<body> 

    <!-- BEGIN PAGE SPINNER --> 
    <div ng-spinner-bar class="page-spinner-bar"> 
     <div class="bounce1"></div> 
     <div class="bounce2"></div> 
     <div class="bounce3"></div> 
    </div> 
    <!-- END PAGE SPINNER --> 

    <!-- BEGIN HEADER --> 
    <div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top"> 
    </div> 
    <!-- END HEADER --> 

    <div class="clearfix"> 
    </div> 

    <!-- BEGIN CONTAINER --> 
    <div class="container"> 
     <div class="page-container"> 
      <!-- BEGIN SIDEBAR --> 
      <div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">   
      </div> 
      <!-- END SIDEBAR --> 
      <div class="page-content-wrapper"> 
       <div class="page-content"> 
        <!-- BEGIN STYLE CUSTOMIZER(optional) --> 
        <div ng-view></div> 
        <!-- END STYLE CUSTOMIZER --> 
        <!-- BEGIN ACTUAL CONTENT --> 
        <div ui-view class="fade-in-up"> 
        </div> 
        <!-- END ACTUAL CONTENT --> 
       </div> 
      </div> 
     </div> 
     <!-- BEGIN FOOTER --> 
     <div data-ng-include="'js/view/footer.html'" class="page-footer"> 
     </div> 
     <!-- END FOOTER --> 
    </div> 
    <!-- END CONTAINER --> 


</body> 
<!-- END BODY --> 
</html>

index.ejs文件包含頁眉頁腳和邊欄文件。

這裏是我的頭文件。

<!-- BEGIN HEADER INNER --> 
<div class="page-header-inner container"> 
    <!-- BEGIN LOGO --> 
    <div class="page-logo"> 
     <a href="#/dashboard.html"> 
     <img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/> 
     </a> 
     <div class="menu-toggler sidebar-toggler"> 
      <!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header --> 
     </div> 
    </div> 
    <!-- END LOGO --> 
    <!-- BEGIN RESPONSIVE MENU TOGGLER --> 
    <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"> 
    </a> 
    <!-- END RESPONSIVE MENU TOGGLER --> 
    <!-- BEGIN PAGE ACTIONS --> 
    <!-- DOC: Remove "hide" class to enable the page header actions --> 
    <div class="page-actions"> 
     <!--<div class="btn-group hide"> 
      <button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown"> 
      <i class="icon-bar-chart"></i>&nbsp;<span class="hidden-sm hidden-xs">New&nbsp;</span>&nbsp;<i class="fa fa-angle-down"></i> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li> 
        <a href="#"> 
        <i class="icon-user"></i> New User </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-present"></i> New Event <span class="badge badge-success">4</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-basket"></i> New order </a> 
       </li> 
       <li class="divider"> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span> 
        </a> 
       </li> 
      </ul> 
     </div>--> 
     <!--<div class="btn-group"> 
      <button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown"> 
      <i class="fa fa-plus"></i>&nbsp;<span class="hidden-sm hidden-xs">New&nbsp;</span>&nbsp;<i class="fa fa-angle-down"></i> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li> 
        <a href="#"> 
        <i class="icon-docs"></i> New Post </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-tag"></i> New Comment </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-share"></i> Share </a> 
       </li> 
       <li class="divider"> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-flag"></i> Comments <span class="badge badge-success">4</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
        <i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span> 
        </a> 
       </li> 
      </ul> 
     </div>--> 
    </div> 
    <!-- END PAGE ACTIONS --> 
    <!-- BEGIN PAGE TOP --> 
    <div class="page-top"> 
     <!-- BEGIN HEADER SEARCH BOX --> 
     <!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box --> 
     <!--<form class="search-form search-form-expanded" action="#" method="GET"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search..." name="query"> 
       <span class="input-group-btn"> 
       <a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a> 
       </span> 
      </div> 
     </form>--> 
     <!-- END HEADER SEARCH BOX --> 
     <!-- BEGIN TOP NAVIGATION MENU --> 
     <div class="top-menu"> 
      <ul class="nav navbar-nav pull-right"> 

       <li class="dropdown dropdown-user"> 
        <a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true"> 
        <img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/> 

        <span class="username username-hide-on-mobile"> 
        {{adminData.name}} q</span> 


        <i class="fa fa-angle-down"></i> 
        </a> 
        <ul class="dropdown-menu dropdown-menu-default"> 

         <li> 
          <a href="#/login"> 
          <i class="icon-key"></i> Log Out </a> 
         </li> 
        </ul> 
       </li> 
       <!-- END USER LOGIN DROPDOWN --> 
      </ul> 
     </div> 
     <!-- END TOP NAVIGATION MENU --> 
    </div> 
    <!-- END PAGE TOP --> 
</div> 
<!-- END HEADER INNER -->

來源

2016-12-28 Shahzad Ditro

你有**控制器**頭**嗎？ –

不用我在主文件中使用了標題index.ejs –

當您詢問有關由您的代碼引起的問題的問題時，如果您提供可用於重現問題的代碼，您將得到更好的答案。該代碼應該使用盡可能少的代碼，但仍會產生相同的問題。請閱讀[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – georgeawg

嘗試使用服務/工廠。一點沒有棱角的方式，但能正常工作（ES6）

export function metadataService(httpFactory) { 
    'ngInject'; 
    this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){ 
     var bImgUrl = httpFactory.baseImgUrl; 
     var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png'; 
     document.querySelector('meta[itemprop=name]').content = title; 
     document.querySelector('meta[itemprop=description]').content = description; 
     document.querySelector('meta[itemprop=image]').content = photo; 



    }; 
}

和控制器/組件/指令內得到您的localStorage的數據和

metadataService（/ localStorage.getItem（someItem） /）

來源

2016-12-28 13:22:18

如何使用AngularJS

回答

相關問題