Question

我在其中一个页面上创建了一个AngularJS指令，但它没有渲染。我也没有任何错误。以下是指令模板和指令绑定代码。感谢有人可以提供帮助。

directive.js

var cardCollapsiblePanelModule = angular.module('cardCollapsiblePanelModule',[]);
cardCollapsiblePanelModule.directive('cardCollapsiblePanel', function() {
    return {
        restrict: 'A',
        templateUrl: 'scripts/virtualserver/virtualserverfeatures/monitoringprobes/views/directive-      templates/monitoring-probe-card-collapsible-panel-template.html',
        scope: {
            cardName: '@cardName'
        },
        controller: function ($scope, $element, $attrs) {
            // update dependent scope.
        },
        link: function (scope, $element, $attrs) {}

    }
});

指令HTML：

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title clearfix" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
    <div class="pull-left">{{ cardName }}</div>
    <div class="pull-right" ><span class="iconSmall iconExpand"></span></div>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
 <!-- load the capture card settings directive here -->
</div>
</div>
</div>

指令的使用方法如下：

  <div class="panel-group" id="accordion">
        <!-- accordion directive for collapsible panel -->
        <div card-collapsible-panel card-index="{{$index}}" ng-repeat="card in monitoringProbeCards">
        </div>
    </div>

我的目标是通过指令将可折叠面板的标题与卡名绑定。有人能指出代码有什么问题吗？

我的REST服务响应如下：

[{"id":1,"cardName":"Card 0 : PIST-16-TDM-PCI-Basic-32 - SN:    GPER190201064","interfaceType":"TDM","probeServerId":2},{"id":2,"cardName":"Card 1 : PIST-16-TDM-PCI-Basic-32 - SN:   GPER190201065","interfaceType":"TDM","probeServerId":2}]

Answer 1

试试这个......

 <div class="panel-group" id="accordion">
    <!-- accordion directive for collapsible panel -->
    <div ng-repeat="card in monitoringProbeCards">
       <div card-collapsible-panel="{{$index}}"></div>
    </div>
</div>

Answer 2

我认为您需要在指令Div：

中添加card-name

<div card-collapsible-panel card-index="{{$index}}" ng-repeat="card in monitoringProbeCards" card-name="{{card.cardName}}" >

从指令HTML绑定到{{cardName}}，绑定到隔离范围上的cardName字段，然后通过@符号后跟cardName绑定到card-name {1}}指令的属性使用单向数据绑定，这意味着该属性的值需要由Angular评估，因此{{card.cardName}}。

AngularJS指令绑定问题

2 个答案: