Angular-如何通过$ scope中的函数更改$ scope属性值

Question

How can I change the $scope property value via the function in the $scope?

html,

<div ng-app="myApp" ng-controller="SimpleController">{{greeting}}</div>

angular,

var app = angular.module("myApp", []);

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.greeting = "Hi";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

Result,

Hi

What I expect,

Hello World

Or, can I add properties to $scope via function?

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

html,

<div ng-app="myApp" ng-controller="SimpleController">{{greeting}}</div> 

I get nothing...

Any ideas?

Answer 1

ok, $scope.greeting is defined inside the $scope.sayHello function so there is no scope property called greeting until sayHello() function execute.

execute the functin and greeting will be available in the HTML

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };

    //execute the function after execution greeting will be available in the html
    $scope.sayHello();
});

Example

it doesn't matter return or not return anything

inside that function

 return $scope.greeting = "Hello " + $scope.name;

first $scope.greeting assign the value so then after this there will have the $scope.greeting to the html.

Answer 2

You don't need to return the assignment, simply set the $scope property and it will work.

Update your method to:

$scope.sayHello = function() {
    $scope.greeting = "Hello " + $scope.name;
};

Answer 3

You all need to do is:

html,

<div ng-app="myApp" ng-controller="SimpleController">{{sayHello()}}</div>

angular,

var app = angular.module("myApp", []);

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.greeting = "Hi";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

I hope it will solve your problem