Framework7 с привязкой данных AngularJS

Question

Здравствуйте, я новичок в Framework7, и я пытаюсь использовать привязку данных к AngularJS, но я не могу заставить ее работать. Я просто пытаюсь связать имя с контроллером с моим HTML, но я думаю, что я делаю что-то неправильно ... Под моими двумя частями кода.

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

Answer 1

Вы забыли поместить элемент корня ng-app в свой HTML.

<div ng-app=""> 

Смотреть это jsFiddle:

Answer 2

Поскольку Framework 7 имеет свою собственную структуру MVC под названием template7, который имеет такую ​​же функциональность, угловатый, как система маршрутов. Поэтому это вызовет массу проблем, когда вы попытаетесь объединить эти две удивительные вещи.

Answer 3

Вы должны попытаться скомпилировать представления на странице. Попробуйте

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); 
      } 
     } 
    } 

}; 

и установить этот плагин в то время как инициализация framework7 приложения

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

Для получения более подробной информации вы можете обратиться ниже GitHub репо с полностью работающие демки https://github.com/ashvin777/framework7.angular

Убедитесь, что вы инициализации ваше угловое приложение перед выполнением каких-либо привязок.