は角度、私はオブジェクトの配列を持つコントローラ

Question

からNG-クリックで動的コンテンツを注入し、動的なHTMLコンテンツを挿入しながら、それらをマッピングする（それが正しく表示され動作します）：私は話題のカップルを検索

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

次のようにsthを実行しようとしました：

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

showMoreInfo（）はアラートを表示するだけです。

どうすればこの作品を作成できますか？あなたは、パラメータとしてクリックメソッドを介してすべての情報を送信することができたヴァルスアレイと$ scope.trim機能をトリムAN showMoreInfo

に

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

Answer 1

、あなたは単にこれを行うことができます。代わりにこれを試してください。

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 2

を自分のものを実行します。代わりに、注射のHTML

Answer 3

NGクリックディレクティブがコンパイルされていないので、あなたの角度は、それを全く気付いていない（= "showMoreInfo（）は、" 発射されていないがNGクリック）ので、クリックの振る舞いは決して発せられません。

角度指示で動的コンテンツを重視する場合は、$compile serviceを読んでみたいです。

Here's a plunkr $ compileを示し、コードが機能しない理由を示します。

ここにデモ隊のスクリプトがあります。 "win"ディレクティブはDOMへの変更を正しく処理し、 "fail"ディレクティブは正しく処理しません。さておき、一般的に、コントローラからDOM操作を実行するためにbad practice考えられているよう

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

。