在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元素

回答

相关问题