search

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

severe problem with ng-include #71

Closed nogece closed 11 years ago

nogece commented 11 years ago

Hi,

There is a problem with ng-include.

Sorry for not providing a jsfiddle.. that wont work for ng-include. Following a simple example and stacktrace

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script
    src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript">
</script>
<script src="lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js"></script>

</head>
<body ng-app>
    <div ng-include src="'something.html'"></div>
    </div>
    <!-- comment the following in to reproduce ! -->
    <!-- 
    <div ng-include src="'something.html'"></div>
    </div>
     -->
</body>
</html>

Error: element[0] is undefined @http://localhost:8080/fuelcheck_client/lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js:375 @http://localhost:8080/fuelcheck_client/lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js:171 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:12851 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:8663 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:6623 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:6660 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:7808 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:7680 @http://localhost:8080/fuelcheck_client/lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js:281 @http://localhost:8080/fuelcheck_client/lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js:319 @http://localhost:8080/fuelcheck_client/lib/angular/angular.js:7894 @http://localhost:8080/fuelcheck_client/lib/jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js:273 done@http://localhost:8080/fuelcheck_client/lib/angular/angular.js:8883 completeRequest@http://localhost:8080/fuelcheck_client/lib/angular/angular.js:9023

Best, No

tbosch commented 11 years ago

Hi, this does not work due to some restrictions of jquery mobile and angular, that cannot be changed by this adapter. The right way to include jquery mobile pages is to just create link with their url, e.g. and have one main jquery mobile page directly in the index.html with those links. jQuery Mobile will then automatically load that page using AJAX and also cache it internally when the user clicks on the links.

After I released 1.1.2, you can also use angular routes for this, see the issue #59.

Here is an example using Plunker, which supports multiple pages in contrast to jsFiddle: http://plnkr.co/edit/qCKdkR

Tobias