AngularJS - JQuery：ngInclude 指令 - DOM答案

【问题标题】：AngularJS - JQuery : ngInclude directive - DOMAngularJS - JQuery：ngInclude 指令 - DOM
【发布时间】：2014-05-29 17:47:12
【问题描述】：

我的模板引导包含JS，因为它们被称为JS没有执行，请你有一个想法。

这是我的 Index.html

<body ng-app>
    <ng-include src="'sidebar.html'"></ng-include>
    <ng-include src="'navbar.html'"></ng-include>
</body>

我的导航栏.html

<header class="navbar navbar-inverse" role="banner">
            <button type="button" id="menu-toggler">
                ...
            </button>

在我的模板库中有-theme.js

$("#menu-toggler").click(function (e) {
    $("body").toggleClass("menu");
    e.stopPropagation();
  });

当 Body 元素中有 'menu' 类时，CSS 显示一个侧边栏

谁知道它为什么不显示？ (Demo jsfiddle)

【问题讨论】：

【解决方案1】：

不要像使用 jQuery 那样使用 Angular；将ng-class 添加到<body>，将ng-click 添加到您的按钮并处理来自Angular 的事件：

<body ng-class="{'menu': bodyIsMenu} ng-controller="Ctrl">
    ...
    <button ng-click="toggle()">...</button>
    ...
</body>

注意我把控制器放在body里面，这样toggle()和bodyIsMenu就在同一个范围内了。JS：

function Ctrl($scope) {
    $scope.bodyIsMenu = false;

    $scope.toggle = function() {
        $scope.bodyIsMenu = !$scope.bodyIsMenu;
    };
}

也是一个非常有趣的阅读here。

【讨论】：