$ compile在Angular指令中不起作用

Question

with this Angular directive every time my model changes, new HTML item appended to the page:

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

And this is HTML view:

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

But ng-click inside dynamically generated HTML doesn't work. actually recompiling of this new added section does not works.

UPDATE:

this is what i want to achieve:

in fact i want to create a chat Application. messages stored inside an Array and i have to bind that array to the HTML view. if i click on every message, i need to an alert() fired inside the controller. my controller is like this:

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

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

in the jQuery way, i simply use DOM manipulation methods and add new tags for each message but in Angular way i have to bind that array as a ng-model or something like that.

at first glance, i realize that designing a directive should be a good idea and inside module i can access to main scope and do needed thing with that directive and i expect that changes inside that directive should projected to HTML view but it fails and things like ng-click doesn't work for dynamically created tags.

Answer 1

There are two ways that you could accomplish this, with or without a directive.

Let's start without a directive; we'll assume that you have an array in the 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>

whenever an object is added to $scope.timeline, it can be assigned a lineNumber , and we can use angular OrderBy to sort the direction in reverse lineNumber order (using - ). The $scope.sendAlert(post) will send the specific post to the function. in our bindings, we use :: to indicate that these are one time bindings, ie not values that need to be monitored independently of the array. This can improve performance on large lists.

using a Directive, we can accomplish this in a very similar manner, by making a Directive that renders a specific post, and passing the post in as a property.

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>

you could further wrap this timeline in a directive in a similar manner, if you so desired. Either of these will accomplish the same task, of looping through your data, ordering it so that the newest post is at the top, and updating whenever the array changes. In the non-directive method, the timelineCtrl handles the $scope.sendAlert function; in the directive method, it is handled by the directive controller postController .

Please note, this is a rough draft based on what you have described and the information from various posts over the last 2 days. I haven't created a dataset to iterate through to test thoroughly, but the logic here should get you started.