在angular.js的工廠創建html元素

-1

我有一個CSS，可以幫助我生成預加載器或加載動畫。我唯一缺乏的就是html代碼。我的想法是創建一個工廠，允許創建預加載器生成所需的html代碼。你能否給我舉個例子或說說怎麼做？在angular.js的工廠創建html元素

非常感謝。

來源

2017-02-22 yavg

我想你想是一個指令。 –

怎麼樣？爲什麼？ – yavg

在線教程。一個指令封裝了可重用html片段的邏輯。 –

這可以使用AngularJS 1.5的Components 該代碼創建一個<menu-bar>組分，其在模板吐出bootstrap <nav-bar>有效地實現。

//-- app.module.js --// 
 
var app = angular.module('app', []); 
 

 
//-- app.menu-bar.component.js --// 
 
app.component('menuBar', { 
 
    bindings: { 
 
    brand: '@' 
 
    }, 
 
    templateUrl: '/partials/menuBar.html', 
 
    controller: function() { 
 
    this.menu = [{ 
 
     name: "Home", 
 
    }, { 
 
     name: "About", 
 
    }, { 
 
     name: "Contact", 
 
    }]; 
 
    } 
 
});

<!-- /partials/menuBar.html --> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">{{$ctrl.brand}}</a> 
 
    </div> 
 
    <div> 
 
     <ul class="nav navbar-nav"> 
 
     <li ng-repeat="menu in $ctrl.menu"> 
 
      <a href="#">{{menu.name}} 
 
     </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<!-- End of menuBar.html --> 
 

 
<!-- index.html --> 
 
<html en="us" ng-app='app'> 
 

 
<head> 
 
    <title> 
 
    NavBar with Angular 1.5.x components 
 
    </title> 
 
    <!-- bootsrap css--> 
 
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css"> 
 
    <!-- angularjs--> 
 
    <script src="lib/angular/angular.min.js"></script> 
 
    <!-- The main app script--> 
 
    <script src="js/app.module.js"></script> 
 
    <script src="js/components/app.navbar.component.js"></script> 
 
</head> 
 

 
<body> 
 
    <menu-bar brand='abc'></menu-bar> 
 
</body> 
 

 

 
</html>

來源

2017-02-22 03:24:48

在angular.js的工廠創建html元素

回答

相關問題