Angular Js $scope

Question

When establishing a controller, and setting the $scope to use a factory method (for GETs and POSTs), during the page load process, my POSTs are fired. Below is an example of the code. To fix this, I wrapped the "POST" in a jQuery click event function and everything works smoothly. Below is the code.

In the controller (app.js):

demoApp.controller('SimpleController', function ($scope, simpleFactory) {
    $scope.customers = [];

    init();

    function init() {
        $scope.departments = simpleFactory.getDepartments();
    }

// Works fine

    $('#myButton').click(function () {
        simpleFactory.postDepartments();
    });

// When setting the "scope" of a controller, during page load the scope factory method is fired off!
// seems like a defect.
//$scope.addDepartment = simpleFactory.postDepartments();

});

So, what is going on here is that if I uncomment the $scope.addDepartment = ... on page load, the postDepartments() factory method is called. This is not the desired behavior. Here is how I have the Html Dom element wired:

<button id="myButton" data-ng-click="addDepartment()">Add Department</button>

So, if I uncomment, like I said above, it adds the department before the user even clicks the button. However, approaching it the jQuery way, there is no issue.

Is this a known bug? Is this the intended functionality? Also, see the factory below, maybe the problem is there?

demoApp.factory('simpleFactory', function ($http) {

    var departments = [];

    var factory = {};

    factory.getDepartments = function () {
        $http.get('/Home/GetDepartments').success(function (data) {
            for (var i = 0; i < data.length; i++) {
                departments.push({ desc: data[i].desc, id: data[i].id });
            }
        })
        .error(function () {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });
        return departments;
    };

    factory.postDepartments = function () {
        $http.post('/Home/PostDepartment', {
            cName: 'TST',
            cDescription: 'Test Department'
        }).success(function (data) {
            departments.push({ desc: 'Test Department', id: departments.length + 1 });
        })
        .error(function () {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });
        return departments;
    };

    return factory;
});

Answer 1

Try this:

$scope.addDepartment = function() {
    return simpleFactory.postDepartments();
}

This will also allow you to pass in arguments in the future, should you decide to. The way you originally had it, you were both assigning the function and calling it at the same time.

Then, you can use it in ngClick:

<button ng-click="addDepartment()">Add Department</button>

Don't use the jQuery click method in your controller, it defeats the purpose of separating the concerns into models, views, controllers, etc. That's what directives are for.