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>

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

1 个答案: