AngularJS - JQuery : ngInclude directive - DOM

Question

My templates bootstrap contain JS, as they are called JS is not executed, you have an idea please.

This is my Index.html

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

My navbar.html

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

in my template library there are - theme.js

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

when in Body element there are 'menu' class, CSS show a sidebar

who know why it doesn't show?? (Demo jsfiddle)

Community · Accepted Answer · 2017-05-23 11:49:55Z

1

Do NOT use Angular like you would use jQuery; add ng-class to the <body>, add ng-click to your button and handle the event from Angular:

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

Note I placed the controller in the body, so as for toggle() and bodyIsMenu to be in the same scope. The JS:

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

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

Also a very interesting read here.

CommunityBot

11 silver badge

answered Apr 15, 2014 at 11:57

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FWIW this example can be more concise, without needing controller code: jsfiddle.net/4QFHV/3