Integrating angular data handling with framework7 (testing/development code)

gistfile1.txt

To share some example (testing) code for any other developers looking into the same issue (note: using requirejs to load script resources):

1. framework7 app

    (function(){
    var f7App = null;
    define(["framework7"],function(){
        if (f7App != null){
            return f7App;
        }
        // Initialize your app
        f7App = new Framework7()
        // and so on

       // using this to make views gettable through a given name (also used in angular for indexing/separating scopes by views)
        f7App.objectTable = {};
        f7App.addNamedView = function(viewName,selector,parameters){
            var view = this.addView(selector,parameters);
            view.name = viewName;
            this.objectTable[viewName] = view;
            return this;
        };

        return f7App;
    });
    }());

2. angular

    (function(){
    var ngApp = null, ngControllers;
    define(["js/f7App","angular"],function(f7App){
        if (ngApp != null){
             return ngApp;
        }
        ngApp = angular.module('ngApp', ['ngControllers']);

       // simple scope sharing approach
      
        ngApp.factory('navbar',function(){
            return {};
        });

        // an approach to sharing navbar/page content scopes
        // separates scopes
        ngApp.factory('scopes',function(){
            return {
                scopeIndex: {},
                get: function(page){
                    return this.scopeIndex[page.view.name][page.name];//this.get(page.view.name,page.name);
                },
                setNavbar: function(page, navbarScope){
                    if (typeof this.scopeIndex[page.view.name] == 'undefined'){
                        this.scopeIndex[page.view.name] = {};
                    }
                    if (typeof this.scopeIndex[page.view.name][page.name] == 'undefined'){
                        this.scopeIndex[page.view.name][page.name] = {};
                    }
                    if (typeof this.scopeIndex[page.view.name][page.name].page != 'undefined'){
                        navbarScope.page = this.scopeIndex[page.view.name][page.name].page;
                    }
                    this.scopeIndex[page.view.name][page.name]['navbar'] = navbarScope;
                    return navbarScope;
                },
                setPage: function(page, pageScope){
                    if (typeof this.scopeIndex[page.view.name] == 'undefined'){
                        this.scopeIndex[page.view.name] = {};
                    }
                    if (typeof this.scopeIndex[page.view.name][page.name] == 'undefined'){
                        this.scopeIndex[page.view.name][page.name] = {};
                    }
                    if (typeof this.scopeIndex[page.view.name][page.name].navbar != 'undefined'){
                        pageScope.navbar = this.scopeIndex[page.view.name][page.name].navbar;
                    }
                    this.scopeIndex[page.view.name][page.name].page = pageScope;
                    
                    return pageScope;
                }
            };
        });

       // init controllers and stuff

        ngControllers.controller('eventDetailsController',['$scope','navbar',function($scope,navbar){
                 //navbar here is a shared object
                 
                 // if any parameters were passed through the url
                 $scope.params.eventId ....
       }]);

      Framework7.$(document).on('navbarInit',function(event){
            angular.element(document).injector().invoke(function($compile,scopes){
                var $page = angular.element(event.detail.navbar.container);
                var scope = $page.scope();
                scopes.setNavbar(event.detail.page,scope);
                $compile($page)(scope);
                scope.$digest();
            });
        });


        Framework7.$(document).on('pageInit',function(event){

            angular.element(document).injector().invoke(function($compile,scopes){
                var $page = angular.element(event.detail.page.container);
                var scope = $page.scope();

                // additional code to retrieve dynamic parameters from any the routing/loading done through framework7
               // also see html code
                var params = {};
                var attr = $page[0].attributes;
                for(var k = 0; k < attr.length; k++){
                    var m = attr[k].name.match(/^param-(.+)$/);
                    if (m){
                        var n = camelCase(m[1]);
                        var v = attr[k].value;
                        
                        m = event.detail.page.url.match(new RegExp('/'+n+'=([^/]+)'));
                        if (v == '' && m){
                            v = m[1];
                        }
                        params[n] = v;
                    }
                }
                scope.params = params;
                
                scopes.setPage(event.detail.page,scope);
                
                $compile($page)(scope);
                scope.$digest();
            });
           return ngApp;
        });
        
3. html pages (to show an example of the parameter loading)

somewhere in my overview controller:

  <a ng-href="partials/eventDetails.html?/eventId={{ event.$id }}/more=foo/beer=bar" class="item-link item-content">
  
details page:
      <div data-page="eventDetails" class="page" ng-controller="eventDetailsController" param-event-id param-another="static">