Question

我正在尝试将字符串显示为angularjs中的HTMl链接。但它正在渲染作为字符串。有人可以帮我解决这个问题。

HTML：

<canvas class="chart chart-bar"
                    data="graph.data"
                    labels="graph.labels"
                    series="graph.series"
                    options="graph.options"
                    legend="graph.legend"
                    click="onClick"
                    chart="chart"></canvas>

JS：

 $scope.graph.labels.push('<span ng-click="openView()">' + value.ProjectName + '</span>');

Answer 1

尝试使用 \＆＃39; 而不是引号（＆＃34; ）

Answer 2

您可以使用指令实现此目的。我们来看看下面的代码：

查看代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as ctrl">
    <h1>Directive test</h1>

    <!--directive element-->
    <my-custom-element></my-custom-element>
  </body>

</html>

我们有一个名为“my-custom-element”的自定义元素，此元素将由位于以下代码中的名为"myCustomElement"的指令填充：

angular
  .module("myApp", [])
  .directive("myCustomElement", myCustomElement)
  .controller("myCtrl", myCtrl)

  function myCustomElement(){
    return {
      restrict: "E",
      template: "<div class = 'myCtrl.attrs.class' data = 'myCtrl.attrs.data'>Template content</div>",
      link: function(scope, element, attrs){
        //here you can add your own logic to modify your data
      }
    }
  }

  function myCtrl(){
    var vm = this;

    vm.attrs = {
      class: "chart chart-bar",
      data: "graph.data"
    };
  }

如您所见，template键替换了我们的自定义元素（my-custom-element）的内容。通过这种方式，您将能够以干净的方式替换您想要的任何内容。

尝试不像jquery开发人员那样修改dom。

我希望这个答案可能对你有用。

以下是plunkr链接：https://plnkr.co/edit/ffeq3e4siGfBn5BD7OU2?p=preview

将字符串转换为角度js

2 个答案: