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數據綁定

回答

相關問題