AngularJS: incorporating various functionalities within a single controller

Question

AngularJS: incorporating various functionalities within a single controller

I have a basic AngularJS controller that I am working on, and I would like it to include two separate functions:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http, $log) {
    //Function 1
    $scope.search = function() {
        $http.post('server.php', { "data" : $scope.keywords})
        .success(function(data, status) {
            $scope.result = data;
        })
    };

    //Function 2
    $scope.tableClick = function() {
          $log.log('Hello World!');
    };

})

I seem to be encountering a syntax issue because the script only works when I remove the second function.

When I try running the script with both functions included (as shown above), I am seeing {{ x }} for the content of the following HTML elements:

<tr ng-repeat="x in result">
<td><a href="www.test.com" >{{ x }}</a></td>

Any ideas on what could be causing this?

javascript angularjs

Answer 1

Answer №1

As mentioned previously, there is no equivalent to echo 'Hello World!' in JavaScript. To display the phrase on the DOM, you must use it as a simple expression like this:

$scope.helloWorld = 'Hello World!';

Then, in the HTML, you can call it with {{helloWorld}}. It seems like you are trying to test it with a function. In that case, make sure to return the string 'Hello World!' as shown below:

$scope.helloWorld = function () {
    return 'Hello World';
};

In the HTML:

{{ helloWorld() }}

If you simply want to "log" the Hello World! to the console (assuming you are not overlooking JS errors): AVOID USING console.log();. Instead, utilize AngularJS' built-in service $log.

A more improved code

However, if I were in your shoes, I would approach the code differently. Here's an example:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function ($scope, $http, $log) {
    //1st function
    $scope.search = function () {
        $http.post('server.php', { "data" : $scope.keywords })
        .then(function (resp) { //use then instead of success/error
            return resp.data;
        }, function inCaseOfErrors (err) { //named just for teaching purposes
            $log.log(err);
        });
    };

    //2nd function
    $scope.tableClick = function () {
        $log.log('Hello World!');
    };
})

Answer 2

As mentioned previously, there is no equivalent to echo 'Hello World!' in JavaScript. To display the phrase on the DOM, you must use it as a simple expression like this:

$scope.helloWorld = 'Hello World!';

Then, in the HTML, you can call it with {{helloWorld}}. It seems like you are trying to test it with a function. In that case, make sure to return the string 'Hello World!' as shown below:

$scope.helloWorld = function () {
    return 'Hello World';
};

In the HTML:

{{ helloWorld() }}

If you simply want to "log" the Hello World! to the console (assuming you are not overlooking JS errors): AVOID USING console.log();. Instead, utilize AngularJS' built-in service $log.

A more improved code

However, if I were in your shoes, I would approach the code differently. Here's an example:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function ($scope, $http, $log) {
    //1st function
    $scope.search = function () {
        $http.post('server.php', { "data" : $scope.keywords })
        .then(function (resp) { //use then instead of success/error
            return resp.data;
        }, function inCaseOfErrors (err) { //named just for teaching purposes
            $log.log(err);
        });
    };

    //2nd function
    $scope.tableClick = function () {
        $log.log('Hello World!');
    };
})

Answer 3

Answer №2

Ensure that the values in your $scope.result are correct. Keep in mind that there is no echo function in JavaScript.

In the code snippet below, I have removed the server call and used hardcoded data for testing purposes:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http) {
    $scope.result = ["apple", "orange", "raisin", "banana"];
    
    $scope.search = function() {
        // Simulating server response
    };

    $scope.tableClick = function(item) {
        console.log("Someone clicked on the table! Row: " + item);
    };
})

HTML:

<table>
    <tr ng-repeat="item in result">
       <td data-ng-click="tableClick(item)">{{ item }}</td>
    </tr>
</table>

Answer 4

Ensure that the values in your $scope.result are correct. Keep in mind that there is no echo function in JavaScript.

In the code snippet below, I have removed the server call and used hardcoded data for testing purposes:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http) {
    $scope.result = ["apple", "orange", "raisin", "banana"];
    
    $scope.search = function() {
        // Simulating server response
    };

    $scope.tableClick = function(item) {
        console.log("Someone clicked on the table! Row: " + item);
    };
})

HTML:

<table>
    <tr ng-repeat="item in result">
       <td data-ng-click="tableClick(item)">{{ item }}</td>
    </tr>
</table>

AngularJS: incorporating various functionalities within a single controller

Answer №1

A more improved code

Answer №2

Similar questions

Managing Events in Angular 2 and Creating Custom Event Handlers

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

Different ways to save data fetched from a fetch request

Error arising from attempting to compile React animations for a specific component, rc

Tips for persisting objects created in PHP while utilizing XMLHttpRequest

Internet Explorer's support for the `<summary>` tag in HTML

Ways to conceal a child div element without using any specific ID reference

Is it possible to configure the async.retry method to retry even upon successful queries, depending on a specific condition?

Guide to activating animation on one element when hovering over another element?

In Javascript, a function is executed only once within another function that is set on an interval

Why is Puppeteer failing to download to the designated folder using "Page.setDownloadBehavior" in Windows?

Creating atomic controller actions in Sails.js: A guide to optimizing your controller functions

Combining inheritance and isolated scopes: a comprehensive guide

Is there a way to assign a role to a user without requiring them to send a message beforehand?

Can the AJAX URL be loaded onto a new page?

Switch the div class when clicked, and revert it when the body is clicked

Unable to create module instance, despite correct module definition