AngularJS-JQuery：ngInclude指令-DOM

Question

我的模板引导程序包含JS，因为它们被称为JS，所以没有执行，请告诉我。

这是我的Index.html

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

我的navbar.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显示一个侧边栏

谁知道为什么它不显示？ （演示jsfiddle ）

Answer 1

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

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

注意我将控制器放在主体中，以便将toggle()和bodyIsMenu置于同一作用域中。 JS：

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

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

这里也很有趣。