0

我正在尝试让 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() 调用中看到的那样，数据被获取然后处理。该处理只涉及在“Intro”字段的末尾放置一个链接，该链接旨在可点击。

有一段时间，我什至很难让 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 上工作，到目前为止还没有成功。任何关于我做错了什么的想法将不胜感激！

4

1 回答 1

0

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

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

起初它没有用。我有两个问题阻止它发射：

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

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

于 2015-06-12T17:59:17.800 回答