未调用函数且未打印console.log

Question

My Angular function is not getting called and it should be the simplest thing.

Inside the function, I have a console.log() statement that does not print.

I have duplicated this code before (minus the jQuery) so maybe that is the issue??

Here is the .js file:

(function($) {
"use strict"; // Start of use strict

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(document).on('click', 'a.page-scroll', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($anchor.attr('href')).offset().top - 50)
    }, 1250, 'easeInOutExpo');
    event.preventDefault();
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 100
});

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

// Offset for Main Navigation
$('#mainNav').affix({
    offset: {
        top: 50
    }
})

var app = angular.module('myContent',[]);

app.controller('ContentController',function($scope) {

    $scope.XG = function(){
        $scope.hideCCAD = true;
        $scope.hideMATE = true;
        $scope.hideWGA = true;
        $scope.hideXG = true;
        console.log("hello")
    };


});

})();

})(jQuery); // End of use strict

Here is the condensed HTML:

<section id="features" class="features" ng-
 controller="ContentController">
    <div class="container">
        <div class="row">
            <div class="container-fluid">
                <div class="containerX">
                    <div class="column column-one">
                        <ul>
                            <button ng-click="CCAD()" 
                             type="button">CCAD</button>
                            <button ng-click="XG()" 
                             type="button">XG</button>
                            <button ng-click="MATE()" 
                             type="button">MATE</button>
                            <button ng-click="WGA()" 
                            type="button">WGA</button>
                        </ul>
                    </div>
               ....

So when I click the button XG I want it to hide certain divs.

That was not working so I put a log statement in and even that did not show up.

What am I doing wrong?

Answer 1

<section id="features" class="features" ng- controller="ContentController">

You have a space between ng- and controller . The following should work:

<section id="features" class="features" ng-controller="ContentController">

Answer 2

Remove all your code and you can see the problem:

(function($) {

})();

})(jQuery); // End of use strict

should be

(function($) {

})(jQuery);// End of use strict

Also, it isn't necessary to wrap angular inside of a closure.

Answer 3

I'm not familiar with Angular at all, but according to what I saw here, you may be lacking a ng-app="myContent" attribute in one of your tags:

W3 school angular