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

Question

I 'm developing an application. have a controler in Codignieter establishing a 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);
}

This code generates the following array

[{"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" ....}]

My html code that uses this array is

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

The system shows the correct list of items in the array generated via CodeIgniter , but to open Popup shows {{estab.estabName}} and not the content of json array that should be the correct name of the hotel. Can anyone guide me ? Greetings from Sao Paulo / Brazil

Answer 1

If the double braces are shown in the view of the angular app, that usually means, that angular did not bootstrap correctly or JavaScript threw an error while parsing your script.

I suspect, that the Angular application is not loaded, due to the missing value in ng-app.

You could try and see the following in the browser console:

1. Does JavaScript throw an error?
2. Does the response of your request to CodeIgniter return the JSON array correctly in the network area of DevTools

Also you shouldn't use a function as a controller in the global scope. Try and use the Angular module system with dependency injection (http://dailyjs.com/2013/05/23/angularjs-injection/) to make sure that your application doesn't influence other libraries or isn't influenced by other libraries used in your browser page.

In this simplified example you should see, that using the module system correctly and defining value for ng-app, the application should be bootstrapped correctly: http://codepen.io/rias/pen/xbzyga