如何在Angular中更新视图/范围

Question

In the scope, the "ug" property depend on "user" and "age", when I update "user" or "age" why "ug" isn't update? how can I update "ug"

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
    user:<input ng-model="user">
    <br>
    age:<input ng-model="age">
    <br>
    user and age : <span style="color: red" ng-bind="user + '-and-' + age"></span>
    <br>
    ug:<span style="color:red;" ng-bind="ug"></span>
    <br>
    addAge:<span style="color:red;" ng-bind="addAge"></span>
</div>

ANGULAR JS CODE

angular.module('myApp', [])
    .controller('ctrl', ['$scope', function($scope) {
        var fn = function(user, age) {
            //TODO
            return user + '-fn-' + age;
        }
        $scope.user = 'taven';
        $scope.age = '30';
        $scope.ug = fn($scope.user, $scope.age);
    }]);

Answer 1

Insted of ng-bind="ug" write ng-bind="fn(user, age)" . Sure, also add: $scope.fn = fn; inside controller's code:

HTML:

ug:<span style="color:red;" ng-bind="fn(user, age)"></span>

Javascript:

.controller('ctrl', ['$scope', function($scope){
    $scope.user = 'taven';
    $scope.age = '30';
    $scope.fn = function(user, age){
        //TODO
        return user + '-fn-' + age;
    }
}]);

Answer 2

You can call an ng-click event to update the scope like this.

 angular.module('myApp', []) .controller('ctrl', ['$scope', function($scope){ var fn = function(user, age){ //TODO return user + '-fn-' + age; } $scope.user = 'taven'; $scope.age = '30'; $scope.updateScope = function(){ $scope.ug = fn($scope.user, $scope.age); } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="ctrl"> user:<input ng-model="user"> <br> age:<input ng-model="age"> <br> user and age : <span style="color: red" ng-bind="user + '-and-' + age"></span> <br> ug:<span style="color:red;" ng-bind="ug"></span> <br> addAge:<span style="color:red;" ng-bind="addAge"></span> <button ng-click=updateScope()>Update scope</button </div>