角 - 注射用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操作。