AngularJS - 雙向綁定不能使用服務

我正在使用W3Schools學習Angular。AngularJS - 雙向綁定不能使用服務

我只是修改關於「服務」的一個例子...以下是代碼：

<!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>

當我更新的文本框，在「十六進制」部分未更新。爲什麼？

來源

2016-08-19 zuresh

您的hexafy.myFunc在控制器初始化時僅被調用一次，因此只有初始值被轉換爲十六進制。如果您希望在運行時對範圍變量的值更改調用函數，則需要過濾器。 AngularJS有很多可以使用的內置過濾器。您也可以定義自定義過濾器，就像您定義服務或控制器一樣。

<!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>

延伸閱讀：AngularJS Filters

注意：過濾器是一個好主意，如果你會使用的hexafy功能在全視圖/多個地方。否則，這只是一個矯枉過正的方法，$scope.$watch方法可以正常工作，如其他答案中所述

來源

2016-08-19 11:23:52

在這裏不需要服務，您可以簡單地使用$ 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(); 
     }); 

});

來源

2016-08-19 11:23:31 user804401

$ scope.hex未更新，因爲它無法更新自身。

控制器第一次加載時，hexafy.myFunc只會被調用一次。

如果您希望$ scope.hex屬性更改爲num，您可能需要在num屬性上監視。

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

函數傳遞給$ scope。$ watch將在每次$ scope.num的值發生變化時被調用。

更多信息看https://docs.angularjs.org/api/ng/type/$rootScope.Scope（錶款）

希望它能幫助。

來源

2016-08-19 11:24:04

您的文本框只綁定到'num'。
'$ scope.hex未綁定到您的文本框'。所以當你輸入文字時它不會更新。您可以在'num'上使用'$ watch'。 Read here

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

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

    }); 
});

來源

2016-08-19 11:32:10 rajagopalx

AngularJS - 雙向綁定不能使用服務

回答

相關問題