Angularjs와 Zurb Foundation Interchange 사용

StackOverflow https://stackoverflow.com//questions/21019132

  •  21-12-2019
  •  | 
  •  

문제

Zururjs Foundation을 CSS 프레임 워크로 사용하는 AngularJS 프로젝트에서 작업하고 있습니다.Foundation의 데이터 교환 angularjs보기의 컨텍스트 내에서 사용하는 방법을 알아 내려고합니다.이것이 가능하며, 나는 그것을 일하게하는 것처럼 보일 수 없다.이것은 현재 가지고있는 것입니다 :

index.html 

<!DOCTYPE html>
<html ng-app='app' xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="foundation/normalize.css" />
    <link rel="stylesheet" href="foundation/foundation.min.css" />
    <link rel="stylesheet" href="app.css" />
</head>
<body>
    <div id="view" ng-view></div>

    <script type="text/javascript" src="jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="foundation/foundation.min.js"></script>

    <script type="text/javascript" src="angularjs/1.2.7/angular.min.js"></script>
    <script type="text/javascript" src="angularjs/1.2.7/angular-route.min.js"></script>

    <script type="text/javascript" src="app.js"></script>
</body>
</html>
.

app.js 

angular.module('app', ['ngRoute'])
  .config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
      .otherwise({ templateUrl: '/views/interchange.html', controller: myCtrl });
    })
    .run(function ($rootScope, $location) {
      $rootScope.$on('$viewContentLoaded', function () {
        $(document).foundation();
      });
    })
;

function myCtrl() {
    console.log('loading controller');
}
.

Interchange.html 

<article>
    testing interchange
    <div data-interchange="[phone.html, (small)], [portrait.html, (medium)], [landscape.html, (large)]"></div>
</article>
.

내 앱을로드 할 때 '인터체인지 테스트'를 볼 수 있습니다.그러나 화면의 크기를 기반으로 한 콘텐츠 (phone.html, portry.html, linure.html)가 표시되지 않습니다.phone.html, portrait.html 및 landscape.html '전화', '초상화'및 '풍경'을 효과적으로 '실제로'라고하는 Div 요소 안에 텍스트가 있습니다.

Angularjs NG-View 내부의 기초 데이터 교환 재료를 활용하는 방법이 있습니까?그렇다면 어떻게?고맙습니다

도움이 되었습니까?

해결책

주요 지점은 Zurb의 데이터 교환 기능이 DomContentLoad 이벤트에서 실행되며 Angularjs의 뷰의로드는 비동기입니다.그래서 이벤트는 이미 일어났습니다.

이 문제를 해결하려면 $ (문서)를 사용하여 수동으로 데이터 교환을 트리거해야합니다 .Foundation ( '인터체인지', '리플 로우');또는 $ (document) .Foundation ( '리플 로우');모든 구성 요소를 리플 로우합니다.

오른쪽 위치 에서이 작업을 트리거하려면 $ RouteChangeSuccess라는 Angularjs 라우팅 시스템에서 특별한 이벤트를 청취해야합니다.이와 같은 것 : 

module.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function () {
        $(document).foundation('reflow');
    });
});
.

이 도움이되기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top