Question

我正在尝试使用ng-click指令在ng-repeat和ng-bind-html中运行。 ng-click代码被添加到从服务器提取的数据的html字符串中（因此ng-bind-html）。该设置有一个控制器，一个用Drupal放在页面上的基本模板，以及一个通过Drupal模板加载的部分模板。

控制器目前看起来像这样：

var guideListController = angular.module('app')
  .controller('guideListController', [
    '$scope',
    '$sce',
    '$compile',
    'ViewService',
    'ToolKit',
  function($scope, $sce, $compile, ViewService, ToolKit) {

  // Storage for which rows need more/less links
  this.rowIndex = [];

  this.showFull = false;
  this.showFullClick = function() {
    alert('Showfull');
  };

  this.trustIntro = function(code) {
    return $sce.trustAsHtml(code);
  };

  // Fetch the guide list view from services
  var data = ViewService.get({view_endpoint:'guide-service', view_path: 'guide-list'}, function(data) {
    //console.log(data);

    // Update/process results 
    for (var row in data.results) {

      // Create short intro w/ truncate.js
      data.results[row].Intro_short = $sce.trustAsHtml($scope.guideList.getShortIntro(data.results[row], row));
      //data.results[row].Intro_short = $scope.guideList.getShortIntro(data.results[row], row);

      // Update intro
      data.results[row].Introduction = $sce.trustAsHtml($scope.guideList.updateIntro(data.results[row], row));
      //data.results[row].Introduction = $scope.guideList.updateIntro(data.results[row], row);

    }
    $scope.guideList.guides = data.results;
  });


  // Add a read less anchor tag at the end of the main intro
  this.updateIntro = function(row, row_index) {
    var intro = row['Introduction'].trim();

    if ($scope.guideList.rowIndex[row_index]) { // only apply Less link if needed
      var index = intro.length - 1;
      var tag = [];
      if (intro.charAt(index) === '>') { // we have a tag at the end
        index--;
        do {
          tag.push(intro.charAt(index));
          index--;
        } while (intro.charAt(index) != '/'); // the closing tag
        index--; // we move the index one more for the "<"
        tag.reverse(); // Reverse
        tag = tag.join('');
      }

      var inserts = ['div', 'p']; // we insert the Less link here.
      if (jQuery.inArray(tag, inserts) >= 0) { // insert into the tag
        intro = intro.substr(0, index) + ' <a class="less" ng-click="$parent.guideList.showFull = false">Less</a>' + intro.substr(index);
      }
      else { // insert at the end of the html
        intro = intro + '<a class="less" ng-click="this.showFull = false">Less</a>';
      }
    }

    return intro; 
  };


  // Truncate the long intro into a shorter length blurb
  this.getShortIntro = function(row, row_index) {
    // Truncate if necc.
    var short_intro = jQuery.truncate(row['Introduction'], {
      length: 250,
      words: true,
      ellipsis: '\u2026 <a class="more moreish" attr-ng-click="guideList.showFullClick()">Read&nbsp;on</a>'
    });

    var more = jQuery('.more', short_intro); // select more link

    if (more.length) { // do we have a more link
      $scope.guideList.rowIndex[row_index] = true;
    }
    else { // no more link
      $scope.guideList.rowIndex[row_index] = false;
    }
    $compile(short_intro)($scope);
    return short_intro;
  };
}]);

正如您在ViewService.get（）调用中看到的那样，数据被提取然后被处理。处理过程只需将链接放在＆＃34; Intro＆＃34;可点击的字段。

有一段时间我甚至很难让ng-click指令甚至显示（它被过滤掉了$ sce.trustAsHtml）。现在它在那里，但点击它没有效果。

主模板（来自Drupal）目前看起来像：

<div class="guide-listing" ng-controller="guideListController as guideList">
  <a ng-click="guideList.showFullClick()">Click me</a>
  <div class="guide-teaser" 
       ng-repeat="guide in guideList.guides"
       ng-include src="'/sites/all/themes/ngTheme/ngApp/partials/guide_teaser.html'">
       <!-- See guide_teaser.html partial for guide teasers -->
  </div>
</div>

上面的Drupal模板中的ng-click按预期工作。

对于ng-repeat中使用的部分，它看起来像这样：

<div ng-controller="guideListController as guideList">
  <h2 class="guide-teaser-title"><a href="{{guide.path}}">{{guide.node_title}}</a></h2>
  <div class="guide-teaser-intro" ng-bind-html="guide.Introduction" ng-show="guide.showFull">
    {{guide.Introduction}}
  </div>
  <div class="guide-teaser-intro-short" ng-bind-html="guide.Intro_short" ng-show="!guide.showFull">
    {{guide.Intro_short}}
  </div>
</div>

到目前为止，我一直在努力让ng-click在short_intro上工作，到目前为止还没有成功。任何关于我做错的想法都将不胜感激！

Answer 1

好的，所以我确实得到了一些牵引力！我使用了http://ngmodules.org/modules/ng-html-compile创建的ngHtmlCompile（https://github.com/francisbouvier）指令（谢谢！）

问题是新的（动态）html没有被编译。

起初它没有用。我有两个问题阻止它被解雇：

答：我停止使用$ sce.trustAsHtml。将此与指令结合使用会导致内容消失！

B：另一个问题是范围问题。在我更改指令以使transclude设置为false之后它工作得很好！

如何使用ng-repeat和ng-bind-html进行ng-click功能？

1 个答案: