Framework7 พร้อมการเชื่อมโยงข้อมูล AngularJS

สวัสดี ฉันยังใหม่กับ Framework7 และฉันกำลังพยายามใช้ data-binding กับ 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="/thabout.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="/thservices.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="/thform.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="/th#" data-panel="left" class="button open-panel">Left Panel</a></div>
              <div class="col-50"><a href="/th#" 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 ซึ่งมีฟังก์ชันการทำงานเดียวกันกับเชิงมุม เช่น ระบบเส้นทาง ดังนั้นมันจะทำให้เกิดปัญหามากมายเมื่อคุณพยายามปล่อยให้สิ่งที่ยอดเยี่ยมทั้งสองนี้ทำงานร่วมกัน

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

สำหรับรายละเอียดเพิ่มเติม คุณสามารถดู repo github ด้านล่างพร้อมการสาธิตการทำงานเต็มรูปแบบ https://github.com/ashvin777/framework7.angular

ตรวจสอบให้แน่ใจว่าคุณกำลังเริ่มต้นแอปพลิเคชันเชิงมุมของคุณก่อนทำการผูกข้อมูลใดๆ

person Ashvin777    schedule 02.09.2015