Framework7 与 AngularJS 数据绑定答案

【问题标题】：Framework7 with AngularJS data-bindingFramework7 与 AngularJS 数据绑定
【发布时间】：2015-02-07 12:09:42
【问题描述】：

您好，我是 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>

【问题讨论】：

标签： angularjs data-binding javascript-databinding html-framework-7

【解决方案1】：

由于 Framework 7 有自己的名为 template7 的 MVC 框架，它具有与 Angular 相同的功能，如路由系统。因此，当你试图让这两个很棒的东西一起工作时，它会引起很多问题。

【讨论】：

【解决方案2】：

您忘记将 ng-app 根元素放在 HTML 中。

<div ng-app="">

看到这个jsFiddle：

【讨论】：

【解决方案3】：

您应该尝试编译有关 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 repo 以及完整的工作演示 https://github.com/ashvin777/framework7.angular

确保在进行任何绑定之前初始化 Angular 应用程序。

【讨论】：