Question

以下指令未在我的html中应用。我尝试从文档中复制一个示例，直到我更改名称以匹配我的元素。这是怎么回事？使用角度1.2.26（遗传项目，我还没有升级）

指令：

<script type="text/ng-template" id="data-breakdown.html">
    <table class="table table-borderless table-striped table-vcenter" ng-transclude></table>
</script>
<script type="text/ng-template" id="data-breakdown-field.html">
    <tr>
        <th ng-bind="label"></th>
        <td ng-bind="value"></td>
    </tr>
</script>

<script>
    app.directive('dataBreakdown', [function () {
        return {
            restrict: 'E',
            templateUrl: 'data-breakdown.html',
            transclude: true,
            link: function (scope, elem, attr) {
                angular.element(elem).addClass('table-responsive');
            }
        }
    }]);
    app.directive('dataBreakdownField', function () {
        return {
            restrict: 'E',
            templateUrl: 'data-breakdown-field.html',
            replace: true,
            scope: {
                label: '&',
                field: '&'
            }
        }
    })
</script>

HTML：

<data-breakdown>
  <data-breakdown-field label="Name" value="John Smith"></data-breakdown-field>
  <data-breakdown-field label="Age" value="42"></data-breakdown-field>
</data-breakdown>

Answer 1

问题在于指令的名称。

Angular从元素和属性中删除数据前缀。

要修复，只需删除名称上的数据前缀，它就会按预期工作。

https://code.angularjs.org/1.2.26/docs/guide/directive#matching-directives

指令未被应用

1 个答案: