Question

我有以下示例，其中我使用的是控制器。在该控制器内部，有一个json对象包含一些值。但是，这些值不会显示在屏幕上。

＆＃13;

<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>

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

不知何故，json对象变量不可见，因此{{alcazarPark.title}}等为null。有任何想法吗？谢谢，

西奥。

Answer 1

您忘记在控制器中注入$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>

Answer 2

更改此

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

当我使用控制器时，数据不会显示 - AngularJs

2 个答案: