Framework7与AngularJS数据绑定

你好我是新来的Framework7，我试图使用与AngularJS的数据绑定，但我似乎无法得到它的工作。我只是试图绑定一个名称从控制器到我的HTML，但我想我做错了什么... 在我的两段代码之下。Framework7与AngularJS数据绑定

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

来源

2015-02-07 user3669161

你忘了把ng-app根元素放到你的HTML中。

<div ng-app="">

看到这个jsFiddle：

来源

2015-02-07 14:55:04 Schaemelhout

由于框架7有自己的MVC框架调用template7，这与角相同的功能，如路径系统。因此，当你试图让这两件很棒的事情一起工作时，会造成很多问题。

来源

2015-02-07 15:27:06 Aiden

您应该尝试编译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

确保你初始化在做任何绑定之前，您的角度应用程序。

来源

2015-09-02 07:26:00 Ashvin777

Framework7与AngularJS数据绑定

回答

相关问题