无法解析Angular指令中的动态变量

Question

我有一个链接到指令的HTML表，我需要将范围变量传递给指令{{product.id}}，产品变量在我的控制器中异步设置。但是，当我尝试在我的指令链接函数中检索属性时，如下所示：

$("#variants-dd").data('variant-source')

它总是返回NULL，我假设它是因为产品变量是异步设置的。我也试过在我的指令中观察产品变量，但仍然无效。

有什么想法吗？

    @app.directive 'myTable', ["$compile", ($compile) ->
      return {
        scope: {}
        link: (scope, element, attrs) ->
          options = {}
          if attrs.myTable.length > 0
            options = scope.$parent.$eval(attrs.myTable)
          else
            options = {
                bStateSave: true
                iCookieDuration: 2419200
                bJQueryUI: true
                bPaginate: false
                bLengthChange: false
                bFilter: false
                bInfo: false
                bDestroy: true
            }

          explicitColumns = []
          element.find('th').each (index, elem) ->
            explicitColumns.push($(elem).text())

          options["oLanguage"] = { "sInfo": "(_END_ of _TOTAL_)", "sInfoEmpty": "(0 of 0)"}

          if (attrs.aoColumns) 
            options["aoColumns"] = scope.$parent.$eval(attrs.aoColumns)
          else if explicitColumns.length > 0
            options["aoColumns"] = explicitColumns

          # aoColumnDefs is dataTables way of providing fine control over column config
          if attrs.aoColumnDefs
            options["aoColumnDefs"] = scope.$parent.$eval(attrs.aoColumnDefs)

          if attrs.fnRowCallback
            options["fnRowCallback"] = scope.$parent.$eval(attrs.fnRowCallback)

          scope.dataTable = element.dataTable(options)

      }
    ]

控制器：

  @ProductCtrl = ["$routeParams", "$scope", "Product", ($routeParams, $scope, Product) ->
    if $routeParams.id
      Product.get {id: $routeParams.id}, (order) ->
        self.original = order
        $scope.product = new Product(self.original)

      $scope.variantOverrideOptions = {
        sDom: 'rt'
        bRetrieve: true
        sPaginationType: "bootstrap"
        aaSorting: [[ 2, "desc" ]]
        bProcessing: true
        bServerSide: true
        bPaginate: true
        bStateSave: true
        iDisplayLength : 19
        fnCreatedRow: $scope.rowCompiler
        sAjaxSource: $("#variants-dd").data('variant-source')
        fnServerData: ( sSource, aoData, fnCallback ) ->
          $.ajax({
              "dataType": 'json', 
              "type": "GET", 
              "url": sSource, 
              "data": aoData, 
              "success": fnCallback
          }) 
      }

HTML表格：

        <table 
            class="table data-table display"
            id="variants-dd"
            ao-columns="variantOverrideColumns"
            my-table="variantOverrideOptions"
            data-variant-source="/inventory/{{product.id}}/variants">
          <thead>
            <tr>
            <th width="15%">SKU</th>
            <th width="10%">Size</th>
            <th width="6%">Cost price</th>
            <th width="6%">Count on hand</th>
            <th width="7%">Minimum on hand</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>