угловой js ng-include, не связанный с областью/функцией контроллера

нужен совет гуру. Я создал простое меню без меню, как вы можете видеть в коде, найденном в следующем plnkr. Проблема в том, что я использовал ng-include для navbar, у которого есть тумблер, который взаимодействует с основной областью.угловой js ng-include, не связанный с областью/функцией контроллера

Проблема заключается в том, что отображается навигационная панель, но когда я пытаюсь щелкнуть по кнопке переключения, она не работает. Пожалуйста, 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>

источник

2015-02-02 Ka Tech

нг-включают в себя создание новой области так, чтобы MainCtrl доступ к области, которую можно использовать $ родителя в вашем navbar.html

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

смотрите здесь http://plnkr.co/edit/vRoBPzjDSjbE7om5zAKn?p=preview

или изменить создать новый объект

$scope.nav = { 

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

    };

и после этого вы можете использовать nav.navLeft в панели навигации

смотрите здесь http://plnkr.co/edit/PQOeT61mjZdDWwSbjlyQ?p=preview

но вы должны рассмотреть, чтобы разделить ваш контроллер на более мелкие части, то есть: содержание, Navbar и связи между ними используя услугу

источник

2015-02-02 09:46:29 sylwester

Спасибо, миллион, что сработало! Да, вы правы в части обслуживания, но совершенно новой для angularjs, я проверю ее. –

Я сейчас смотрю на услуги и пытаюсь обвести вокруг себя голову. Можете ли вы дать некоторое представление о том, как это приложение будет полезно для обслуживания? Внимательно оценивайте любые комментарии –

@KaTech см. Здесь https://egghead.io/lessons/angularjs-sharing-data-between-controllers – sylwester

угловой js ng-include, не связанный с областью/функцией контроллера

ответ

Смежные вопросы