javascript - 将 HTML/CSS 元素转换为可重用的 AngularJS 指令？

Question

我有一个基于 HTML 的现有管理面板 Web UI。

我正在尝试获取所有 HTML 组件，并将它们转换为可重复使用的 AngularJS 指令，这样我就可以毫不费力地将它们嵌入到页面中。

这是我坚持的一个:

<section class="dash-tile">
    <div class="tile-title" ng-controller="testCtrl">{{test}}</div>
    <div class="tile-stats"><b>8068</b>
    </div>
    <div class="progress progress-xs mt5 mb10">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        </div>
    </div>
    <div class="tile-footer">
        Based on new sales
    </div>
</section> 

这个片段，在我的 .html GUI 中使用，将创建一个小盒子形状的标题，里面有一些数据。

谁能给我一个例子，说明如何将其变成可重用的组件？

到目前为止我在这里:

admin.directive('whiteBox', function () {
  return {
    restrict: 'EA', //restrict the directive to ONLY an attribute or element
        replace: true,
    transclude: true,
    template: '<section class="dash-tile">' +
                                    '<div class="tile-title" ng-controller="testCtrl">' + '{{test}}' + '</div>'
                                    + '<div class="tile-stats">' + '<b>' + '8068' + '</b>'
                                    + '</div>'
                                    + '<div class="progress progress-xs mt5 mb10">'
                                        + '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'
                                    + '</div>'
                                    + '</div>'
                                    + '<div class="tile-footer">'
                                    +   'Based on new sales'
                                    + '</div>'
                                + '</section> ',
        link: function (scope, element, attrs) {
                // add events
        }
    };

但是由于某种原因，这会破坏应用程序。

Answer 1

AngularJS 使用以下约定

如果您将指令命名为 whiteBox，在 HTML 中您将使用它 white-box。

AngularJS 声明

app.directive('myDirective', function () {

HTML 用法

<div my-directive></div>