Error when angular directive in Salesforce

Vote count:

0

Error when using replace in angular directive with Salesforce/VisualForce

My Directive code

// Shipment Addresses
myDirectives.directive('shipmentAddress', ['CartService', function(CartService){
    return{
        scope: true,
        replace: true,
        templateUrl: 'apex/shipment_addresses_tplhtml',
        controller: function($scope){
            this.addressInfo = $scope.addr;
            $scope.removeAddress = function(accountId, addrId){
                if(confirm('Are you sure you want to remove this shipping address?')){
                    CartService.deleteCartAddress(accountId, addrId).then(function(response){
                        console.log(response);
                        $scope.$emit('refreshCart');
                    });
                }
            }
        }
    }
}]);

Directive HTML

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false"  docType="html-5.0">
  <td>
    <div class="address-container">
      <p data-once-text="addr.street_1"></p>
                 <p data-once-text="addr.street_2"></p>
                <p><span class="once-addr" data-once-text="addr.city"></span>, 
                <span class="once-addr" data-once-text="addr.state"></span>,
                 <span class="once-addr" data-once-text="addr.zip"></span></p>
                 <p data-once-text="addr.country"></p>
                <p><a href="javascript:;" details="addr" shipment-details = "shipment-details">View</a> <span>|</span>
                 <a href="javascript:;" ng-click="removeAddress(acc.id, addr.id)">Remove</a></p>
    </div>
</td>
</apex:page>

In Index html I have called directive code as

<tbody program-items="program-items" table-matrix="tableMatrix"></tbody>

But I am getting error as Template for directive 'shipmentAddress' must have exactly one root element. apex/shipment_addresses_tplhtml

asked 1 min ago

Shankar Kamble

591