javascript - $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 View :

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

但是动态生成的 HTML 中的 ng-click 不起作用。实际上重新编译这个新添加的部分是行不通的。

更新:

这就是我想要实现的目标:

事实上我想创建一个聊天应用程序。消息存储在数组中，我必须将该数组绑定(bind)到 HTML View 。如果我单击每条消息，我需要在 Controller 内触发警报()。我的 Controller 是这样的:

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

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

在 jQuery 方式中，我只是使用 DOM 操作方法并为每条消息添加新标签，但在 Angular 方式中，我必须将该数组绑定(bind)为 ng-model 或类似的东西。

乍一看，我意识到设计一个指令应该是一个好主意，并且在模块内部我可以访问主范围并使用该指令执行所需的操作，并且我希望该指令内部的更改应该投影到 HTML View ，但它失败了像 ng-click 这样的东西不适用于动态创建的标签。

Answer 1

有两种方法可以实现此目的:使用或不使用指令。

让我们从没有指令的情况开始；我们假设您的 Controller 中有一个数组。

<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) 将把特定的帖子发送到该函数。在我们的绑定(bind)中，我们使用 :: 来指示这些是一次性绑定(bind)，即不需要独立于数组进行监视的值。这可以提高大型列表的性能。

使用指令，我们可以通过非常相似的方式来完成此任务，即创建一个呈现特定帖子的指令，并将该帖子作为属性传递。

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 函数；在指令方法中，它由指令 Controller postController 处理。

请注意，这是根据您所描述的内容以及过去 2 天各种帖子中的信息编写的草稿。我还没有创建一个数据集来迭代以彻底测试，但这里的逻辑应该可以帮助您开始。