2015-02-02 6 views
0

전문가에게 조언이 필요합니다. 다음의 plnkr에서 볼 수있는 코드에서 볼 수 있듯이 간단한 메뉴가 아닌 캔버스를 만들었습니다. 문제는 ng-include를 기본 범위와 상호 작용하는 토글 스위치가있는 navbar에 사용했기 때문입니다.각도/컨트롤러 기능에 연결하지 않았습니다.

문제는 navbar가 표시되지만 토글 버튼을 클릭하면 작동하지 않습니다. 제발 plnkr http://plnkr.co/edit/QF5rEv

내가 navbar.html 내용을 대체하고 메인 페이지에 넣어 잘 작동합니다.

아무도 나에게 무엇이 일어나고 있는지 말해 줄 수 있으면 고맙겠 나? 그리고 주위에 일하는거야? 미리 감사드립니다!

내 코드는 plnkr에서 발견된다 :

<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script> 
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="bootstrap" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <script src="app.js"></script> 

</head> 

<body ng-controller="MainCtrl"> 
    <!--navLeft Menu--> 
    <div class="navLeft" ng-class="navLeft?'navLeft-on':'navLeft-off'"> 
    <div ng-show="navLeft"> 
     <ul>Nav goes here</ul> 
    </div> 
    <!--/Nav div show--> 
    </div> 
    <!--/Nav Left--> 

    <!--navRight Menu--> 
    <div class="navRight" ng-class="navRight?'navRight-on':'navRight-off'"> 
    <div ng-show="navRight"> 
     hi 
    </div> 
    <!--/Nav div show--> 
    </div> 
    <!--/Nav right--> 

    <!--Canvas where header, content and footer sits--> 
    <div class="canvas" ng-class="navClick()"> 
    <!--changes class of canvas in accordance to NavLeft or NavRight is on--> 
    <div ng-include="'navbar.html'"></div> 

    <!--content--> 
    <div class="content"> 
     Content goes here 
    </div> 
    <!--/content--> 

    </div> 
    <!--/canvas--> 


</body> 

</html> 

답변

0

는 NG-포함

ng-click="$parent.navLeft=!$parent.navLeft" 

여기를 참조하십시오 당신이 당신의 navbar.html에 $ 부모를 사용할 수 있도록 액세스 MainCtrl 범위에 새 범위를 만드는 http://plnkr.co/edit/vRoBPzjDSjbE7om5zAKn?p=preview

또는 변경하는 것은 새로운 객체를 생성

$scope.nav = { 

    navLeft:false,//default navLeft menu off 
    navRight:false//default navRight menu off 

    }; 
컨텐츠, 네비게이션 바 및 그들 사이의 의사 소통 :

그 후

http://plnkr.co/edit/PQOeT61mjZdDWwSbjlyQ?p=preview

여기를 참조하시기 바랍니다 메뉴 바에서 nav.navLeft을 사용할 수 있지만 당신은 작은 부분으로 컨트롤러를 분리하기 위해 고려해야은 즉 서비스 이용

+0

감사합니다. 예, 당신은 서비스 파트에 대해 옳았습니다. 여전히 앵글 릭스에게 새로운 것이 었습니다. 나는 그것을 점검 할 것입니다. –

+0

저는 실제로 서비스를 찾고 있습니다. 내 머리를 감싸려고 노력하고 있습니다. 이 응용 프로그램이 서비스의 이점을 얻을 수있는 방법에 대한 더 깊은 통찰력을 줄 수 있습니까? 정말 고마워요 어떤 의견 –

+1

@KaTech 여기를 참조하십시오 https://egghead.io/lessons/angularjs-sharing-data-between-controllers – sylwester

관련 문제