Question

我有一个css可以帮助我生成预加载器或加载动画。我唯一缺少的是HTML代码。我的想法是创建一个工厂，允许创建生成预加载器所需的html代码。你能举个例子或者说怎么做吗？

非常感谢你。

Answer 1

使用 AngularJS 1.5 Components可以有效地实现这一目标该代码会创建一个<menu-bar>组件，该组件会在模板中吐出bootstrap <nav-bar>。

＆＃13;

//-- 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",
    }];
  }
});

＆＃13;

<!-- /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>

＆＃13;

在angular.js

1 个答案: