Unable to assign value to this.name within a $scope function in AngularJS

Question

Unable to assign value to this.name within a $scope function in AngularJS

After developing an AngularJS application using Skinny AngularJS Controllers, everything seems to be functioning correctly. However, I have encountered a problem with the $scope.submit method. I am trying to assign a value to this.name, and then retrieve it using the this.getDetails method. Unfortunately, the value is not properly binding with the this.name variable.

If anyone has a solution to this issue, please let me know.

JSFiddle

script

var app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {

    this.getDetails = function () {
        return this.name;
    };

    $scope.submit = function () {
        this.name = "Messi";
    };
});

javascript angularjs angularjs-scope

Answer 1

Answer №1

There is an issue with the code in $scope.submit, where the reference to this points to $scope instead of your controller. Here's a revised version that should function correctly:

var app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    var vm = this;
    vm.getDetails = function () {
        return vm.name;
    };

    $scope.submit = function () {
        vm.name = "Messi";
    };
});

In my opinion, it's best practice to stick with either using $scope or this, not mixing both. Remember to call one.submit() in your HTML :

var app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    this.getDetails = function () {
        return this.name;
    };

    this.submit = function () {
        this.name = "Messi";
    };
});

Edit: Please refer to this guide for the advantages of storing this in a variable like vm https://github.com/johnpapa/angularjs-styleguide#controllers

Answer 2

There is an issue with the code in $scope.submit, where the reference to this points to $scope instead of your controller. Here's a revised version that should function correctly:

var app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    var vm = this;
    vm.getDetails = function () {
        return vm.name;
    };

    $scope.submit = function () {
        vm.name = "Messi";
    };
});

In my opinion, it's best practice to stick with either using $scope or this, not mixing both. Remember to call one.submit() in your HTML :

var app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    this.getDetails = function () {
        return this.name;
    };

    this.submit = function () {
        this.name = "Messi";
    };
});

Edit: Please refer to this guide for the advantages of storing this in a variable like vm https://github.com/johnpapa/angularjs-styleguide#controllers

Answer 3

Answer №2

Here is a variation of the scenario:

let app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    let _self = this;

    _self.getName = function () {
        return _self.name;
    };

    $scope.save = function () {
        _self.name = "Ronaldo";
    };
});

Answer 4

Here is a variation of the scenario:

let app = angular.module('myApp', []);
app.controller('ControllerOne', function ($scope) {
    let _self = this;

    _self.getName = function () {
        return _self.name;
    };

    $scope.save = function () {
        _self.name = "Ronaldo";
    };
});

Unable to assign value to this.name within a $scope function in AngularJS

Answer №1

Answer №2

Similar questions

The Jquery confirmation dialogue does not seem to be functioning properly within the Content Place Holder

Custom sorting in JavaScript

How should a string be properly converted to JSON format?

Utilizing a combination of MVC, jQuery, and Ajax to ensure that JavaScript is fully loaded before proceeding

oidc-client-js failing to display all profile claims that are supported by oidc-client-js

Dealing with a socket.io CORS problem

I must automate the process of navigating to a different page within my website

Creating a custom data type with a specific value in GraphQL

Exploring the combination of Meteor's Flow router or Iron router with the powerful Angular UI

Who gets the callback when onreadystatechange is triggered in a single-threaded JavaScript environment?

Exploring the Possibilities of Message Embeds in Discord using JavaScript

PHP's counterpart to the Javascript XMLHttpRequest

I successfully created a Chinese writing practice deck in Anki, which is functional on the desktop version but unfortunately not compatible with Ankidroid

Rows in a table will not decrease when added anew

Ways to divide a string into pairs of two using jQuery

How come the Jquery :odd selector picks out the even elements?

Utilizing ng-options value in ng-change

Is there a way to apply a consistent border to both the input radio button and its corresponding label once the radio button has been selected

Can a single ui-view in index.html be used to accommodate nested states with UI router?

Implementing a pre-defined value for ajax in ajax programming for beginners