2017-04-18 34 views
2

林試圖把一個Angularjs圖像滑塊成laravel項目,這是針對視圖林試圖把角滑塊在一個laravel項目

<!DOCTYPE html> 
<html lang="{{ config('app.locale') }}" ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  

var app = angular.module('app', ['ui.bootstrap']); app.controller('CarouselDemoCtrl', CarouselDemoCtrl);

function CarouselDemoCtrl($scope){ 
     $scope.myInterval = 3000; 
     $scope.noWrapSlides = false; 
     $scope.activeSlide = 0; 
     $scope.slides = [ 
     { 
      image: 'images/hotel1.jpg' 
     }, 
     { 
      image: 'images/piscina1.jpg' 
     }, 
     { 
      image: 'images/pool1.jpg' 
     }, 
     { 
      image: 'images/presidencial1.jpg' 
     } 
     ]; 
    } 
    </script> 
    <title>Papayon Resorts</title> 
    <!-- Fonts --> 
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div class="flex-center position-ref full-height"> 
     @if (Route::has('login')) 
      <div class="top-right links"> 
       @if (Auth::check()) 
        <a href="{{ url('/home') }}">Inicio</a> 
       @else 
        <a href="{{ url('/login') }}">Iniciar Sesión</a> 
        <a href="{{ url('/register') }}">Registro</a> 
       @endif 
      </div> 
     @endif 
     <div class="content"> 
      <div class="title m-b-md"> 
       Papayon Resorts 
      </div> 
      <div class="links"> 
       <a href="/habitaciones/">Habitaciones</a> 
       <a href="/promosiones">Paquetes de promoción</a> 
     </div> 
    </div> 
    <div> 
    <div ng-controller="CarouselDemoCtrl" id="slides_control"> 
      <div> 
       <uib-carousel interval="myInterval" active="activeSlide"> 
        <uib-slide ng-repeat="slide in slides" index="$index"> 
         <img ng-src="{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error--> 
         <div class="carousel-caption"> 
         </div> 
        </uib-slide> 
       </uib-carousel> 
      </div> 
     </div> 
    </div> 
</body> 

代碼

但是當我這樣做,它告訴我這個錯誤

下面是被錯誤我得到:

enter image description here

的任何想法如何解決這個問題?

回答

1

使用@符號告知刀片渲染引擎的表現應保持不變

更改此

<img ng-src="{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error--> 

<img ng-src="@{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error--> 

文檔:https://laravel.com/docs/5.4/blade#blade-and-javascript-frameworks