0

I am trying to create a load more function in Symfony2 while using AngularJS in the view.

I made a function in my controller that selects everything that I need but I dont know how to print the values in my view.

Code: TipController.php

/**
 * Load (Ajax)
 *
 * @param Request $request
 * @param $offset
 * @param $limit
 * @return JsonResponse
 */
public function loadAction(Request $request, $offset, $limit) {
    // get tips
    $tips = $this->getDoctrine()->getRepository(Tip::class )->findByOffset($offset, $limit);

    // return as json
    return new JsonResponse($tips);
}

My Angular variables are getting a conflict with the twig variables. So I hardcoded everything using AngularJS, Symfony and jQuery together. I know this is VERY dirty, could someone explain me how to do it properly?

Code: TipCtrl.js

.controller('TipsCtrl', function($scope, $http) {

    $scope.amount = 3;
    $scope.pageOffset = 0;
    $scope.totalEntity = 0;

    $('#tips').NewWaterfall();

    $scope.loading  = false;
    $scope.dist = 300;

    loadMore();

    $scope.loadMoreClick = function(){
        loadMore();
    };

    function loadMore(){
        //console.log(loadEntity("tips",$scope.currentAmount, $scope.pageOffset));
        console.log('loadmore');

        loadEntity("tips",$scope.amount,$scope.pageOffset);
        $scope.pageOffset = $scope.pageOffset + $scope.amount;
    }

    function loadEntity(entity, amount, offset) {

        $http({
            method: 'GET',
            url: './' + entity + '/load/' + offset + '/' + amount
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            return response;
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        }).then(function (response) {
            console.log('response', response.data);
            $scope.tips = response.data.tips;
            //$scope.offset = $scope.offset + $scope.currentAmount;
            appendEntity();
            $scope.totalEntity = $scope.totalEntity + $scope.tips.length;
            //$scope.tips.length = 0;

            if ($scope.totalEntity < response.data.totalTips){
                //er zijn nog tips
                console.log("$scope.totalEntity:(", $scope.totalEntity, ")" + "is kleiner (", response.data.totalTips, ")");
            }
            else {
                //er zijn geen tips meer
                $(".tips.lazyload").css({"display":"none"});
                console.log("$scope.totalEntity:(", $scope.totalEntity, ")" + "is groter dan:(", response.data.totalTips, ")");
            }
        });
    }

    function appendEntity() {

        $scope.loading = true;

        angular.forEach($scope.tips, function(tip) {
            $("#tips").append(
                "<li class='show'>" +
                    "<div class='block'>" +
                        "<figure><img src='/uploads/" + tip.path + "' alt=''></figure>" +
                        "<div class='detail'>" +
                            "<h2>" + tip.title + "</h2>" +
                            "<p>" + tip.introduction + "</p>" +
                            "<a href='./tips/" + tip.id + "' class='button'>Read More</a>"+
                        "</div>" +
                    "</div>" +
                "</li>");

            console.log("tip: ",tip.title + ': ');
        });

        $scope.loading = false;
    }

}

Code: tips.html.twig

        <main class="wrapper" ng-controller="TipsCtrl">
            <div class="row tips lazyload">

                <div class="col col-sm-12">

                    <div class="text-center">
                        <a class="viewmore loadmore" ng-click="loadMoreClick()" href="#">{{ 'label.show.more'|trans({}, 'skylux') }}</a>
                    </div>

                </div>

            </div>
        </main>

Thank you.

Jeroen
  • 1,168
  • 1
  • 12
  • 24
  • Sorry i'm not sure what is your problem. getting along twig and angular? – goto Jan 23 '17 at 08:51
  • Yes sorry, my problem is twig variables with AngularJS variables – Jeroen Jan 23 '17 at 09:00
  • Let me know if this link solve your problem :] [AngularJS-Twig conflict with double curly braces](http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces) – goto Jan 23 '17 at 09:02
  • Yeah I understand that part, but how to I print it out? In a twig file or javascript file? I dont know how to get the values in the twig file. – Jeroen Jan 23 '17 at 09:34
  • `
    {{ '{{' ~ tip.title ~ '}}' }}
    `     – Jeroen Jan 23 '17 at 09:45
  • @goto Unexpected token "name" of value "tip" ("end of print statement" expected) – Jeroen Jan 23 '17 at 09:46
  • 1
    That's stange,what about `{% verbatim %}
    {{ tip.title }}
    {% endverbatim %}`     – goto Jan 23 '17 at 11:03

1 Answers1

0

Normally you should not have to combine Twig and AngularJs in the same application. By the look of your code example, I would stick with jQuery and drop the AngularJS part of your application. (for the sake of simplicity)

You should look at your AngularJs and your Backend application (PHP in your case) as 2 separate codebases and environments.

If you would like to keep using AngularJs, you should remove the twig variables from the templates. To display data in an angular application, you should exclusively use the API to receive that data. For fixed settings such as the api endpoints, you can use AngularJs constants.

PS. For translations, you can also use AngularJs.

anvanza
  • 83
  • 8