使用highcharts插入ui-sref创建动态链接

Question

我正在尝试创建一个类别xAxis，它充当到该应用程序其他区域的链接。 我想避免使用href，因为那样会重新加载所有内容。 我认为，问题的核心在于我。

labels: {
    formatter: function () {
        let newvar = $compile(`<a class="link">${this.value} - ${vm.tableData.contentMain[this.pos].bothNeeded} - ${vm.tableData.contentMain[this.pos].percentageCompleted}</a> - `)($scope)

        return angular.element(newvar[0]);
    },
    useHTML: true
}

我的问题是[object Object]显示在页面上而不是链接上。 我相信我需要进行编译才能使ui-sref起作用，这就是为什么它存在的原因。 非常感谢创建这些动态链接的任何帮助！

我正在运行Angular 1.6以防万一

UPDATE

希望我误会了$ comp如何工作。 这是一个错误的，无法正常工作的示例，超出了图表的高度

http://jsfiddle.net/HB7LU/31241/

Answer 1

从HighCharts Docs formatter返回String。 因此，您与此无关。 $compile生成的DOM元素已被重新消化以消化周期。 因此，这并非不可能。

但是，您可以生成类似以下内容的字符串：

 formatter: function () {
       return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+$scope.someValues[this.value]+'</div>';       
    },

演示小提琴

我想避免使用href ...

您可以通过基于this.vaue对其进行this.vaue来构建自定义href

---

附带说明：

当您在DOM $compile d对象中打印时，您将得到类似以下内容的信息： {"0":{"ng-1505336047666":6},"length":1}其中0是$scope ID，而1505336047666重新生成每个元素的ID建立

Answer 2

好的，因此，如果您提供cloneAttachFn，然后将结果分配给作用域，则可以使其执行所需的操作。

HTML

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  {{newthing}}
</div>

使用Javascript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $compile) {
    $scope.name = 'Superhero';
    $scope.link = $compile(`<div>Test</div>`)(
      $scope, 
      function(clonedElement, scope) { 
        console.log(clonedElement[0]); 
        $scope.newthing = clonedElement[0].outerText;
      }
    );
}

这是小提琴： http : //jsfiddle.net/HB7LU/31285/