サービスを呼び出す関数は、

Question

を初期化するときにのみ機能します.W3schoolsチュートリアルで動作するAngularJSを使い始める。

私は、サービスヘキサフィックスを使用するgetHex（）関数によって使用される入力を作成することによって、サンプルコードの一部を拡張しようとしています。

<div ng-app="myApp" ng-controller="myCtrl">  
    <p>The hexadecimal value of <input ng-model="inputNo"/> is:</p>  
    <h1>{{getHex()}}</h1> 
</div> 

<p>A custom service with 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.inputNo = 255; 
    $scope.getHex = function() { 
     return hexafy.myFunc($scope.inputNo); 
    }; 
}); 
</script> 

ページ初負荷は、入力255を含み、{{getHex（）}} FFとしてレンダリングされているので、機能が正しく動作するように見えます。

しかし、私は入力の値を変更すると、正確に入力を{{getHex（）}}に正確に返します。 getHex（）はhexafy.myFuncの結果を返すことになっています。

Answer 1

サービス

return hexafy.myFunc(parseInt($scope.inputNo)); 

Demo

Answer 2

に送信する前にintに$scope.inputNoを変換するには、進に変換する前にjavascriptのNumberに送信されたペイロードを変換します。

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

 
app.service('hexafy', function() { 
 
    var hexafyService = {}; 
 

 
    var _myFunc = function(x) { 
 
    return Number(x).toString(16); 
 
    } 
 

 
    hexafyService.myFunc = _myFunc; 
 
    return hexafyService; 
 
}); 
 

 
app.controller('myCtrl', function($scope, hexafy) { 
 
    $scope.inputNo = 200; 
 
    $scope.getHex = function() { 
 
    $scope.hexNo = hexafy.myFunc($scope.inputNo); 
 
    }; 
 
    $scope.getHex(); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <p>The hexadecimal value of <input ng-model="inputNo" ng-change="getHex()" /> is:</p> 
 
    <h1>{{hexNo}}</h1> 
 
</div> 
 

 
<p>A custom service with a method that converts a given number into a hexadecimal number.</p>