Question

需要一些大师的建议。我已经创建了一个简单的菜单外画布，您可以在以下plnkr中找到的代码中看到。问题是我使用了ng-include for 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="angular.js@1.3.x" 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="bootstrap@*" 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>

Answer 1

ng-include创建新范围，以便访问MainCtrl范围，您可以在navbar.html中使用$ parent

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

但您应该考虑将控制器分成更小的部分，即：内容，导航栏以及使用服务在它们之间进行通信

angular js ng-include不包含范围/控制器功能

1 个答案: