2016-04-02 2 views
0

Я начал изучать AngularJS неделю назад, и я пытаюсь сделать что-то очень простое без успеха. Я не могу найти ошибку. В настоящее время ui-view не отображает никаких данных. Но при проверке с инспектором борлома все кажется неправильным. Помогите пожалуйста и спасибо.AngularJS: Просмотр не отображается

<!DOCTYPE html> 
    <html ng-app="confusionApp" lang="en"><head> 


    <body> 

    <div class="container"> 
    <div class="row row-content" ng-controller="dishDetailController"> 
     <div class="col-xs-12"> 
      <div class="media"> 
        <h2 class="media-heading">{{dish.name}}</h2> 


      <p>Put the comments here</p> 
     </div> 
    </div> 

</div> 

<script src="../bower_components/angular/angular.min.js"></script> 

<script> 

    var app = angular.module('confusionApp',[]); 

    app.controller('dishDetailController', function() { 

     var dish={ 
         name:'Uthapizza', 
         image: 'images/uthapizza.png', 
         category: 'mains', 
         label:'Hot', 
         price:'4.99', 
         description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
         comments: [] 
       }; 

     this.dish = dish; 

    }); 

</script> 

ответ

0

Если вы используете this в контроллеру вы должны использовать as в имени контроллера, как этот

ng-controller="dishDetailController as ctrl" 

и доступа с экземпляром контроллера, как это

<h2 class="media-heading">{{ctrl.dish.name}}</h2> 

Если вы не хотите использовать as в контроллере затем присоединить данные с $scope

Первая впрыснуть $scope

app.controller('dishDetailController', function($scope) { 

Затем присоедините с $scope

$scope.dish = dish; 
+0

Я пытался решить эту проблему на несколько дней. Большое спасибо! –

0

изменить ваш HTML, как этот

<div class="row row-content" ng-controller="dishDetailController as dishDetail"> 
    <div class="col-xs-12"> 
     <div class="media"> 
       <h2 class="media-heading">{{dishDetail.dish.name}}</h2> 

и посмотреть, если он работает,

контроль Контроллер Как синтаксисом в угловом link

для того, чтобы использовать this вы должен иметь контроллер в качестве декларации

0

контроллер Update использовать сферу, работающий пример https://jsbin.com/dodaduwowe/edit?html,output

app.controller('dishDetailController', function($scope) { 

     var dish={ 
         name:'Uthapizza', 
         image: 'images/uthapizza.png', 
         category: 'mains', 
         label:'Hot', 
         price:'4.99', 
         description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
         comments: [] 
       }; 

     $scope.dish = dish; 

    }); 
0

Try This

<!DOCTYPE html> 
    <html ng-app="confusionApp" lang="en"><head> 
    <body> 

    <div class="container"> 
    <div class="row row-content" ng-controller="dishDetailController"> 
     <div class="col-xs-12"> 
      <div class="media"> 
        <h2 class="media-heading">{{dish.name}}</h2> 
      <p>Put the comments here</p> 
     </div> 
    </div> 

</div> 
<script src="../bower_components/angular/angular.min.js"></script> 

<script> 

    var app = angular.module('confusionApp',[]); 

    app.controller('dishDetailController', function($scope) { 

     $scope.dish={ 
         name:'Uthapizza', 
         image: 'images/uthapizza.png', 
         category: 'mains', 
         label:'Hot', 
         price:'4.99', 
         description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
         comments: [] 
       }; 



    }); 

</script> 
Смежные вопросы