создавать элементы html на заводе в angular.js

-1

У меня есть css, который помогает мне генерировать предварительный загрузчик или загружающую анимацию. Единственное, чего мне не хватает, это html-код. Моя идея - создать фабрику, которая позволяет создать код html, необходимый для создания прелоадера. Можете ли вы привести мне пример или сказать, как это сделать?создавать элементы html на заводе в angular.js

большое спасибо.

источник

2017-02-22 yavg

я думаю, что вы хотите, это директива. –

как? и почему??? – yavg

theres tutorials онлайн. директива инкапсулирует логику многократно используемого фрагмента 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

создавать элементы html на заводе в angular.js

ответ

Смежные вопросы