Laravel-使用Angular动态添加图像

Question

I want to input image's src value with Angular. Here is my code :

HTML :

<div ng-app="myApp" ng-controller="MyCtrl">
   <img src="{{asset('assets/img/'.'/'.  @{{ item.name }} )}}">
</div>

JS :

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
    $scope.items =
    [
            {
                sort: 1,
                name: 'name1',
                img : 'mezon1',

            },
                {
                sort: 1,
                name: 'name2',
                img : 'mezon2',

            }

    ]
 }
});

But it's not working and Laravel gives me this error : FatalErrorException .. unexpected '{'

Any suggestion?

Answer 1

chenge it to

<div ng-app="myApp" ng-controller="MyCtrl">
   <img src="{{asset('assets/img/')}}@{{ item.name }}">
</div>

Answer 2

Angular and blade (laravel template engine) are conflicting on the use of "{" and "}". You should configure the one or the other to use another interpolation characters.

Have a look on https://scotch.io/tutorials/quick-tip-using-laravel-blade-with-angularjs