$ compile在Angular指令中不起作用

Question

每當我的模型更改時，使用此Angular指令，新的HTML項就會附加到頁面上：

app.directive('helloWorld', function($compile) {
    return {
        restrict: 'AE',
        replace: true,

        scope:{
            arrayItem: '=ngModel'
        },
        link: function ($scope, ele, attrs) {
            $scope.$watch( 'ngModel' , function(){
                ele.html('<div ng-click="sendLike({{arrayItem.data.timeline_content}})" class="timeline-item"> Hello {{arrayItem2.data.timeline_content}} </div>');
                $compile(ele.contents())($scope);
            });
        }
    };
});

這是HTML視圖：

<hello-world ng-repeat="arrayItem in arr" ng-model="arrayItem"></hello-world>

但是在動態生成的HTML內進行ng-click無效。 實際上，重新編譯此新添加的部分無效。

更新：

這是我想要實現的目標：

實際上，我想創建一個聊天應用程序。 消息存儲在數組中，我必須將該數組綁定到HTML視圖。 如果我單擊每條消息，則需要在控制器內部觸發alert（）。 我的控制器是這樣的：

app.controller("timelineCtrl", function ($scope) {
    $scope.arr={};

    $scope.sendLike = function (id) {
        alert(id);
    };
         .
         .
         .
}

以jQuery的方式，我只是使用DOM操作方法並為每條消息添加新標簽，但是以Angular的方式，我必須將該數組綁定為ng-model或類似的東西。

乍一看，我意識到設計指令應該是一個好主意，並且在模塊內部我可以訪問主作用域並使用該指令執行所需的操作，並且我希望該指令內的更改應投射到HTML視圖，但失敗並且類似ng-click不適用於動態創建的標簽。

Answer 1

有或沒有指令，有兩種方法可以完成此操作。

讓我們從沒有指令開始； 我們假設您在控制器中有一個數組。

<div ng-controller="timelineCtrl" class="timelineframe">
  <div ng-repeat="post in timeline | orderBy:'-lineNumber'" class="post">
    <div ng-click="sendAlert(post)">
      <span class="postnumber">{{::post.lineNumber}}:</span>
      <span class="message">{{::post.message}}</span>
    </div>
  </div>
</div>

每當將對象添加到$ scope.timeline時，都可以為其分配一個lineNumber ，並且我們可以使用angular OrderBy以相反的lineNumber順序對方向進行排序（使用- ）。 $scope.sendAlert(post)會將特定的帖子發送到函數。 在綁定中，我們使用::來表示這些是一次性綁定，即不是需要獨立於數組進行監視的值。 這樣可以提高大型列表的性能。

使用偽指令，我們可以通過創建呈現特定帖子的偽指令，並將該帖子作為屬性傳遞，以非常相似的方式來實現。

app.directive('timelinePost', function() {
  return {
    restrict: 'AE',
    scope:{
       post: '='
    },
    template: '<div ng-click="postCtrl.sendAlert()">
                 <span class="postnumber">{{::postCtrl.post.lineNumber}}:</span>
                 <span class="message">{{::postCtrl.post.message}}</span>
               </div>',
    controller: 'postController',
    controllerAs: 'postCtrl',
    bindToController: true
};


app.controller("postController", function(){
  var self = this;  //save reference to this
  self.sendAlert = function(){
    //the specific post is available here as self.post, due to bindToController
  };
};

//usage in HTML:
<div ng-controller="timelineCtrl" class="timelineframe">
  <div ng-repeat="post in timeline | orderBy:'-lineNumber'" class="post">
    <timeline-post post='post'></timeline-post>
  </div>
</div>

如果需要，您可以按照類似的方式進一步將此時間軸包裝在指令中。 這兩種方法都可以完成相同的任務，即遍歷數據，對其進行排序以使最新的帖子位於頂部，並在數組發生更改時進行更新。 在非指令方法中， timelineCtrl處理$scope.sendAlert函數； 在指令方法中，它由指令控制器postController處理。

請注意，這是一個粗略的草稿，它基於您所描述的內容以及最近兩天來自各個帖子的信息。 我尚未創建要進行迭代以進行徹底測試的數據集，但是此處的邏輯應該可以幫助您入門。