Question

我有一个angularjs代码，可以很好地显示数据库中的记录。由于内容很长，我想通过jquery添加阅读更多按钮。如果我在 angularjs ng-repeat 函数之外调用jquery数据， ReadMore按钮将起作用。例如

<div class="text">
Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from any where in the world. The purpose of my birth is to give solutions in all ramifications. Coming to my work is a web designer and a developer who has got vast experience in giving solutions
 on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire.

     <div class="post" ng-repeat='post in posts'>
    </div>

但问题是，当我尝试在 angularjs ng-repeat 函数中调用Jquery数据时，readmore按钮不起作用。似乎angularjs与jquery冲突，如下面的代码

       <div class="post" ng-repeat='post in posts'>
 <div class="text">
    Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from any where in the world. The purpose of my birth is to give solutions in all ramifications. Coming to my work is a web designer and a developer who has got vast experience in giving solutions
     on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire.

        </div> </div>

以下是entircode ..

<!doctype html>
<html>
    <head>

        <link href="style.css" type="text/css" rel="stylesheet" />



<!--read more text starts here-->

 <script src="jquery.min.js"></script>

<script>

$(document).ready(function(){

 function breakWords(paragraph, showtext){


  var words = paragraph.split(' ');

  var newText = '';

  for(i=0; i<words.length; i++){


   if(i<= showtext){

    newText += words[i] + ' ';

   }else {

    if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';  

    newText += words[i] + ' ';

    if (words[i+1] == null) newText += '</span><a href="#" class="links"> &raquo; read more</a>';

   }

  }

  return newText;

 }


 $('.text').each(function () {

   $(this).html(breakWords($(this).html(), 50));

   $(this).children('span').hide();


  }).click(function () {


   var fulltext = $(this).children('span.fulltext');
   var links = $(this).children('a.links');


   if (fulltext.hasClass('hide')) {

    fulltext.show(200);
    links.html(' &raquo; hide');  
    fulltext.removeClass('hide');

   } else {

    fulltext.fadeOut(100);
    links.html(' &laquo; read more');   
    fulltext.addClass('hide');

   }

   return false;

  });

});

</script>


<!--read more text ends-->

    </head>
    <body ng-app='myapp'>
        <div class="content" ng-controller='fetchCtrl' >

            <div class="post" ng-repeat='post in posts'>



<div class="text">
Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from 
any where in the world. 

The purpose of my birth is to give solutions in all ramifications. 

Coming to my work is a web designer and a developer who has got vast experience in giving solutions
 on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web
 applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. 
Thanks a lot !!!</div>


                <h1 >{{ post.title }}</h1>
                <div class="post-text">
                    {{ post.content }}
                </div>

            </div>

        </div>

        <!-- Script -->
        <script src="angular.min.js"></script>
        <script>
        var fetch = angular.module('myapp', []);
        fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {

                // Fetch post data
                $scope.getPosts = function(){

                    $http({
                        method: 'post',
                        url: 'likeunlike.php',
                        data: {request: 1}
                    }).then(function successCallback(response) {

                        $scope.posts = response.data;
                    });

                }

                $scope.getPosts(); // Fetch post data

            }
        ]);

        </script>
    </body>
</html>

AngularJS ng-repeat与jquery冲突

0 个答案: