Framework7 with AngularJS data-binding

Question

Hello I'm new to the Framework7 and I'm trying to use data-binding with AngularJS but I can't seem to get it work. I'm simply trying to bind a name from the controller to my HTML but I guess I'm doing something wrong... Beneath my two pieces of code.

<div class="pages navbar-through toolbar-through" ng-controller="DemoController">
      <!-- Page, data-page contains page name-->
      <div data-page="index" class="page">
        <!-- Scrollable page content-->
        <div class="page-content">
          <div class="content-block-title">Welcome To My Awesome App</div>
          <div class="content-block">
            <div class="content-block-inner">
              <p>Couple of worlds here because my app is so awesome!</p>
              <p>Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.</p>
            </div>
          </div>
          <div class="content-block-title">What about simple navigation?</div>
          <div class="list-block">
            <ul>
              <li><a href="about.html" class="item-link">
                  <div class="item-content">
                    <div class="item-inner"> 
                      <div class="item-title">{{ name }}</div>
                    </div>
                  </div></a></li>
              <li><a href="services.html" class="item-link">
                  <div class="item-content"> 
                    <div class="item-inner">
                      <div class="item-title">Services</div>
                    </div>
                  </div></a></li>
              <li><a href="form.html" class="item-link">
                  <div class="item-content"> 
                    <div class="item-inner">
                      <div class="item-title">Form</div>
                    </div>
                  </div></a></li>
            </ul>
          </div>
          <div class="content-block-title">Side panels</div>
          <div class="content-block">
            <div class="row">
              <div class="col-50"><a href="#" data-panel="left" class="button open-panel">Left Panel</a></div>
              <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>

<script>
  function DemoController($scope)
  {
    $scope.name = "Dieter";
    $scope.toggle = function(){
      $scope.visible = !$scope.visible;
    };
    $scope.visible = true;



  }
</script>

score 3 · Answer 1 · answered Feb 07 '15 at 15:27

3

Since Framework 7 has its own MVC framework called template7, which has the same functionality with angular, like route system. Therefore, it will cause a lot of problems, when you try to let these two awesome things work together.

answered Feb 07 '15 at 15:27

Aiden

35
3

score 2 · Answer 2 · edited Jul 23 '17 at 06:20

2

You forgot to put the ng-app root element in your HTML.

<div ng-app="">

See this jsFiddle:

edited Jul 23 '17 at 06:20

Cœur

32,421
21
173
232

answered Feb 07 '15 at 14:55

Schaemelhout

635
7
24

Ashvin777 · Answer 3 · 2016-07-13T08:53:56.127

You should try to compile the views on pageinit event. Try this

Framework7.prototype.plugins.angular = function(app, params) {
    function compile(newPage) {
        try {
            var $page = $(newPage);
            var injector = angular.element("[ng-app]").injector();
            var $compile = injector.get("$compile");
            var $timeout = injector.get("$timeout");
            var $scope = injector.get("$rootScope");
            $scope = $scope.$$childHead;
            $timeout(function() {
                $compile($page)($scope);
            })
        } catch (e) {
            //console.error("Some Error Occured While Compiling The Template", e);
        }
    }

    return {
        hooks: {
            pageInit: function(pageData) {
                compile(pageData.container);
            }
        }
    }

};

and set this plugin while initialization of framework7 app

new Framework7({
  ....
  angular : true
  ....
})

For more details you can refer below github repo with fully working demos https://github.com/ashvin777/framework7.angular

Make sure that you are initialization your angular application before doing any bindings.

Framework7 with AngularJS data-binding

3 Answers3