时间戳

首页 > 解决方案 > AngularJS ng-repeat 与 jquery 冲突

jquery - AngularJS ng-repeat 与 jquery 冲突

问题描述

我在下面有一个 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 Data 时，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>

下面是整个代码..

<!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>

标签： jqueryangularjs

解决方案

推荐阅读