角 - 注射用NG-点击动态内容从控制器

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功能的做你的东西在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>"; 
    }); 

Click方法

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

Answer 3

因为NG单击指令不被编译你的NG-点击= “showMoreInfo（）” 不点火（角度是完全不知道它），所以点击行为永远不会被触发。

如果您要使用角度指令强调动态内容，您想要阅读$compile service。

Here's a plunkr演示$ compile和为什么你的代码不工作。

下面是演示程序的脚本。 “win”指令可正确处理对DOM的更改，而“fail”指令不会。

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); 
     } 
     } 
    } 
    }) 

顺便说一句，它通常被认为是bad practice从控制器执行DOM操作。