ng-repeat与自定义read-more指令不起作用

Question

I have an ng-repeat, ng-repeat="post in posts track by $index" , then a 'p' tag with a custom directive that will limit the amount of words in the post until the user clicks 'read more'.

<p read-more>{{post.thePost}}</p>

I am getting the error:

TypeError: Cannot read property 'split' of undefined.

It will work when I have plain text in between the 'p' tags, but when I have multiple items from $scope.posts , I think it is failing to read the actual text.

Any way to get around this?

Here is the read-more angular directive I am using:

https://github.com/pattysnippets/angular-readmore

Answer 1

The key does seem to be using the content attribute.

Here is the key markup:

<p ng-show="loading">Loading posts...</p>
<p ng-repeat="post in posts track by $index" read-more content="{{post.text}}"></p>

And here is my controller code that simulates loading in posts from the server:

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.loading = true;
  $timeout(function() {
    $scope.loading = false;
    $scope.posts = [1, 2, 3].map(function(id) {
      return {
        id: id,
        heading: 'Post ' + id,
        text: 'Lorem ipsum dolor (...etc...)'
      };
    });
  }, 1000);
});

Here is the Plunkr with it working .