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

Question

在范围内，“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>

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

Answer 1

ng-bind="ug" 写入 ng-bind="fn(user, age)"。 当然，还要在控制器代码中添加：$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;
    }
}]);

Answer 2

您可以像这样调用 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>