Question

我正在使用W3Schools学习Angular。

我刚修改了一个关于＆＃34;服务＆＃34; ...的示例以下是代码：

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{hex}}</h1>

</div>

<p>A custom service whith a method that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.num = 200;
  $scope.hex = hexafy.myFunc($scope.num);
});
</script>

</body>
</html>

＆＃13;

当我更新文本框时，＆＃34; HEX＆＃34;部分没有更新。为什么呢？

Answer 1

初始化控制器时，只调用一次hexafy.myFunc，因此只将初始值转换为十六进制。如果希望在运行时调用范围变量的值更改函数，则需要过滤器。 AngularJS有很多内置的过滤器可供使用。您也可以定义自定义过滤器，就像定义服务或控制器一样。

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{num | hexafy}}</h1>

</div>

<p>A custom filter that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.filter('hexafy', function() {
    return function (x) {
        return Number(x).toString(16);  // Also convert the string to number before calling toString.
    }
});
app.controller('myCtrl', function($scope) {
  $scope.num = 200;
  //$scope.hex = hexafy.myFunc($scope.num);
});
</script>

</body>
</html>

＆＃13;

进一步阅读：AngularJS Filters

注意：如果您要在视图中的多个位置使用hexafy功能，则过滤器是一个好主意。否则，它只是一种矫枉过正，$scope.$watch方法对你来说很好，如其他答案中所述

Answer 2

$ scope.hex没有更新，因为它无法自行更新。

第一次加载控制器时，只调用一次hexafy.myFunc。

如果您希望$ scope.hex属性更改为num，则可能需要在num属性上监视。

$scope.$watch('num', function(newVal, oldVal) {
$scope.hex = hexafy.myFunc($scope.num); /// or newVal
}

每次$ scope.num的值发生变化时，都会调用$ scope。$ watch中传递的函数。

有关详细信息，请参阅https://docs.angularjs.org/api/ng/type/$rootScope.Scope（观看部分）

希望它有所帮助。

Answer 3

这里不需要服务，你可以简单地在num上使用$ watch。请参阅下面的代码片段，它将更新您的ui，我已更新您的控制器代码，请检查。

app.controller('myCtrl', function($scope, hexafy) {
        $scope.num = 200;
        $scope.hex = "some default val";

        $scope.$watch('num', function(newValue, oldValue) {
            $scope.hex = newValue.toString();
        });

});

Answer 4

您的文本框仅绑定到'num'。
'$ scope.hex没有绑定到您的文本框'。因此，当您键入文本时，它不会更新。你可以在'num'上使用'$ watch'。 https://docs.angularjs.org/api/ng/directive/ngBindHtml

app.controller('myCtrl', function($scope, hexafy) {

  $scope.num = 200;
  $scope.$watch('num', function() {
      $scope.hex = hexafy.myFunc(parseInt($scope.num));

  });
});

AngularJS - 使用服务无法正常工作的双向绑定

4 个答案: