Question

我有一个对象数组并在插入动态html内容时映射它们（它可以正常工作并显示）：

this.arr.map(function(val) {
        val.about = val.about.substring(0,150) + " <span ng-click='showMoreInfo()' class='show-more-info'>...more</span>";
    });

我搜索了几个主题并尝试这样做：

var element = angular.element(document.querySelector('.show-more-info'));
    element.bind('click', $scope.showMoreInfo);

showMoreInfo（）应该只显示警告。

我该如何使这项工作？

Answer 1

而不是注入html，你可以简单地这样做：在$ scope.trim函数中使用vals数组和修剪，在showMoreInfo中做你的东西

 <span ng-repeat="val in vals" ng-click='showMoreInfo()' class='show-more-info'>{{trim(val)}}</span>

Answer 2

您可以通过点击方式发送所有信息作为参数。试试这个。

this.arr.map(function(val) {
        var abt = val.about;
        val.about = val.about.substring(0,150) + " <span ng-click='showMoreInfo('"+ abt +"')' class='show-more-info'>...more</span>";
    });

点击方法

$scope.showMoreInfo = function (about) {
    alert(about);
}

Answer 3

你的ng-click =＆＃34; showMoreInfo（）＆＃34;因为没有编译ng-click指令（角度完全没有意识到它）所以没有触发，所以从不触发点击行为。

如果你对使用angular指令的动态内容感到沉重，你想要阅读$compile service。

Here's a plunkr演示了$ compile以及为什么您的代码无效。

这是来自演示插件的脚本。＆＃34;胜利＆＃34;指令正确处理对DOM的更改，并且＆＃34;失败＆＃34;指令没有。

app = angular.module("app", [])
  .controller("myController",function($scope) {
     $scope.showMoreInfo = function() {
          alert("Win Moar!");
        }
  })
  .directive("win", ['$compile', function($compile) {
    return {
      restrict: "E",
      scope: {
        appendToId: "@",
      },
      template: "<button ng-click='click()'>ng-click's Inserted From Here Wins!</button>",
      link: function(scope, elem, attrs) {
        scope.click = function() {
          let target = angular.element(document.querySelector("#" + scope.appendToId)),
            content = target.html()
            ;
          content += ("<p><span ng-click='showMoreInfo()' class='show-more-info'>...more</span></p>");
          target.html(content);
          /**
           * The $compile service compiles an HTML string or DOM into a 
           * template and produces a template function, 
           * which can then be used to link scope and the template together.
           * 
           * Because the html of target is compiled  it's directives are going 
           * to get compiled, namely ng-click='showMoreInfo()'
           * 
           * Note the passing target.scope() instead of scope...
           */
          $compile(target)(target.scope());
        }
      }
    }
  }]).directive("fail", function() {
    return {
      restrict: "E",
      scope: {
        appendToId: "@",
      },
      template: "<button ng-click='click()'>ng-click's Inserted From Here Fail :(</button>",
      link: function(scope, elem, attrs) {
        scope.click = function() {
          let target = angular.element(document.querySelector("#" + scope.appendToId)),
            content = target.html()
            ;
          content += ("<p><span ng-click='showMoreInfo()' class='show-more-info'>...more</span></p>");
          /**
           * Changing the DOM doesn't cause angular to process changes 
           * e.g. compile directives like ng-click so the ng-click in 
           * the content doesn't work.
           */
          target.html(content);
        }
      }
    }
  })

另外，从控制器执行DOM操作通常被认为是bad practice。

Angular - 通过控制器

3 个答案: