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

Здравствуйте, я новичок в 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>

data-binding angularjs html-framework-7 javascript-databinding
person user3140464    schedule 07.02.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

person Aiden    schedule 07.02.2015

arrow_upward
2
arrow_downward

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

<div ng-app="">

См. этот jsFiddle:

person Schaemelhout    schedule 07.02.2015

arrow_upward
0
arrow_downward

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

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

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

person Ashvin777    schedule 02.09.2015