0

I am using Laravel 4.2 for an old app. It is mixed with Angular. I need to display a map of locations returned from Laravel.

I am using an Angular directive on a blade template to do this.

I need to pass Laravel values into the directive so they can be used. I saw you can pass an array in this question, but am not sure how to do it with Laravel blade values.

Note: Since blade uses {{ }} for interpolation, I have told Angular to change its interpolation:

$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');

Laravel blade template: $locations is a blade variable:

<fz-map locations="{{$locations}}"></fz-map>

Directive:

( function( ng, app ) {

    'use strict';

    app.directive( 'fzMap', ['$rootScope', function($rootScope) {
        return {
            restrict: 'AE',
            scope : {
                locations : '='
            },
            link: function(scope, element, attr) {
                console.log('loc', scope.locations);
                scope.Template = '/directive_html/map.html';
            },
            template: "<div ng-include='Template'></div>"
        };
    } ]);
} )( angular, myApp );

Angular error: Unexpected end of expression: [{

Community
  • 1
  • 1
user3871
  • 12,432
  • 33
  • 128
  • 268
  • `locations : '='` in directive means you are binding to an angular model in parent of the directive. Why can't you make api request for that data? – charlietfl Jan 26 '16 at 04:38
  • I don't know much about blade -- is it rendered client-side or server-side? As @charlietfl points out, you can only two-way bind to a property in an angular scope. If Blade renders first, you might be able to send the data one-way using '@' or get it into an angular $scope property using `ng-init='locations = {{$locations}}'`. Just some thoughts...If Angular renders first, then this of course won't work. – Beartums Jan 26 '16 at 04:51

0 Answers0