當我使用控制器時數據不顯示 - AngularJs

Question

我有以下示例，我正在使用控制器。在這個控制器裏面，有一個json對象持有一些值。但是，這些值不會顯示在屏幕上。

<script> 
 
     var app = module.module('myTemplate',[]); 
 
     app.controller('alcazarController',function(){ 
 
      var alcazarPark= 
 
         { 
 
          title:'Alcazar Park', 
 
          image: 'http://www.theo-android.co.uk/github-images/alcazar.png', 
 
          description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
 
          
 
         }; 
 
      this.alcazarPark = alcazarPark; 
 
     }); 
 
</script>

body{ 
 
    background: url("http://www.theo-android.co.uk/github-images/wallpaper6.png") no-repeat; 
 
    height: 500px; 
 

 
    width: 100%; 
 
    background-repeat: no-repeat; 
 

 
    background-position: center center; 
 
    background-attachment: fixed; 
 

 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 

 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    
 
    
 
} 
 
.row-content-1 { 
 
    background-color: rgba(0,100,200,0.8) !important; 
 
    color: #fff; 
 
    margin:0px auto; 
 
    padding: 50px 0px 50px 0px; 
 
    min-height:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<div class="container" ng-app="myTemplate"> 
 
    <!-- Alcazar Park row--> 
 
    <div class="row row-content-1" ng-controller="alcazarController"> 
 
     <div id="alcazarModal" class="modal fade" role="dialog"> 
 
     
 
    
 
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row"> 
 
      <div class="media"> 
 
      <div class="media-left media-middle"> 
 
       
 
        <img ng-src={{alcazarPark.image}} class="media-object img-thumbnail" id="alcazar-image" alt="alcazar"> 
 
       
 
      </div> 
 
      <div class="media-body"> 
 
       <h3 class="media-heading">{{alcazarPark.title}}</h3> 
 
       <p style="font-size:20px;">{{alcazarPark.description}}</p> 
 
       <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a></p> 
 
      </div> 
 
       
 
      </div>

不知何故，JSON對象變量是不可見的，因此{{alcazarPark.title}}等爲空。有任何想法嗎？謝謝，

Theo。

Answer 1

改變這種

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

這個

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

EDITED

在你看來也使用controller as ctrl

<div class="row row-content-1" ng-controller="alcazarController as ctrl">

<div class="media-body"> 
    <h3 class="media-heading">{{ctrl.alcazarPark.title}}</h3> 
    <p style="font-size:20px;">{{ctrl.alcazarPark.description}}</p> 
    <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a></p> 
</div> 

Demo

Answer 2

你忘記注入$scope在你的控制器，然後分配值$scope

試試這個

<script> 
     var app = module.module('myTemplate',[]); 
     app.controller('alcazarController',function($scope){ 
      var alcazarPark= 
         { 
          title:'Alcazar Park', 
          image: 'http://www.theo-android.co.uk/github-images/alcazar.png', 
          description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 

         }; 
      $scope.alcazarPark = alcazarPark; 
     }); 
</script>