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
}

我的问题是[对象对象]显示在页面而不是链接上。我相信我需要编译以使ui-sref工作，这就是它存在的原因。任何创建这些动态链接的帮助都非常感谢！

如果重要的话，我正在运行Angular 1.6

更新

希望我误解$ compile是如何工作的。这是一个糟糕的，非工作的示例OUTSIDE of highcharts

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

Answer 1

来自HighCharts文档formatter返回String。所以你与它无关。 $compile生成了已被重新设置为摘要周期的DOM元素。所以它并非如此。

但是你可以生成如下字符串：

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

Demo Fiddle

我想避免使用href ...

您可以根据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/

使用ucha-sref插入高图表创建动态链接

2 个答案: