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

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

Answer 2

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

<div ng-app="">

请参阅此jsFiddle：

Answer 3

您应该尝试在pageinit事件上编译视图。试试这个

<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-annotations</artifactId>
    <version>3.1beta9</version>
    <exclusions>
        <exclusion>
            <groupId>javax.persistence</groupId>
            <artifactId>ejb</artifactId>
        <exclusion>
    </exclusions>
</dependency>

并在初始化framework7 app

时设置此插件

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

};

有关详细信息，请参阅下面的github repo以及完全正常工作的演示 https://github.com/ashvin777/framework7.angular

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

Framework7与AngularJS数据绑定

3 个答案: