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

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"

在范围内,“ug”属性依赖于“user”和“age”,当我更新“user”或“age”时为什么“ug”不更新?怎么能更新“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 JS代码

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);
    }]);

2 个解决方案

#1

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

您可以调用ng-click事件来更新此范围。

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>

#2

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

绝对的ng-bind =“ug”写ng-bind =“fn(用户,年龄)”。当然,还要添加:$ scope.fn = fn;内部控制器的代码:

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;
    }
}]);

#1