Codeigniter + AngularJs + JqueryMobile没有显示项目Json

时间:2015-03-01 00:43:44

标签: javascript php json angularjs codeigniter

我正在开发一个应用程序。 在Codignieter有一个控制器,建立一个json

function  hotel_list(){
    $this->db->order_by('estabNome','asc');
    $query1 = $this->db->get('hotel');
    $json  = $query1->result();
    $JSON = json_encode($json);
    print_r($JSON);
}

此代码生成以下数组

[{"estabId":"1","estabName":"Hotel do Jo\u00e3o Mauricio","estabFone":"(12) 3333-3333","estabAdress":"Rua Brigadeiro Jord\u00e3o, 761 - Abern\u00e9ssia, Campos do Jord\u00e3o - SP, 12460-000, Brasil","estabAdressComplement":"Pr\u00f3ximo ao Center" ....}]

我使用此数组的html代码是

<div id="one" data-role="page">
    <div data-role="header">
            <a href="../index.html" data-ajax="false" data-icon="back">
                Back
            </a>
            <h1>Hotels</h1>
    </div><!-- /header -->      
    <div data-role="content">
        <div ng-app="" ng-controller="estabController">
            <ul data-role="listview" data-filter="true">
                <li ng-repeat="estab in item">
                    <a href="#detail" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">
                    <img ng-src="http://192.168.1.12/guia/001/assets/img/hotels/{{estab.img1}}" />
                    {{estab.estabName}}
                    </a>
                </li>
            </ul>        
        </div>   
    </div> 
</div>
<script>
function estabController($scope,$http){
    $http.get("http://192.168.1.12/guia/001/home/hotel_list")
    .success(function(response){$scope.item = response;});
}
</script> 

  <!-- Start of third page: #detal -->
   <div data-role="page" id="detail">
   <div data-role="header" data-theme="b">
      <h1>Content</h1>
   </div><!-- /header -->
   <div role="main" class="ui-content">
       <h2>Detalhes</h2>
      {{estab.estabNome}}
            <br/>    
            <a href="#one" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">Close</a></p>
</div><!-- /content -->
<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

系统显示通过CodeIgniter生成的数组中正确的项目列表,但要打开Popup显示{{estab.estabName}}而不是json数组的内容应该是酒店的正确名称。 谁能指导我? 来自圣保罗/巴西的问候

1 个答案:

答案 0 :(得分:0)

如果在角度应用程序的视图中显示双括号,通常意味着,角度没有正确引导,或者JavaScript在解析脚本时引发了错误。

我怀疑,由于ng-app中缺少值,因此未加载Angular应用程序。

您可以尝试在浏览器控制台中查看以下内容:

  1. JavaScript会抛出错误吗?
  2. 您对CodeIgniter的请求的响应是否在DevTools的网络区域中正确返回JSON数组
  3. 此外,您不应在全局范围内将函数用作控制器。尝试并使用具有依赖注入(http://dailyjs.com/2013/05/23/angularjs-injection/)的Angular模块系统,以确保您的应用程序不会影响其他库,或者不受浏览器页面中使用的其他库的影响。

    在这个简化示例中,您应该看到,正确使用模块系统并定义ng-app的值,应该正确引导应用程序:http://codepen.io/rias/pen/xbzyga