AngularJS - 서비스를 사용하지 않는 양방향 바인딩

W3Schools를 사용하여 Angular를 배우고 있습니다. 나는 텍스트 상자를 업데이트 할 때 "HEX"부분이 업데이트되지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가 한 번만 호출되므로 초기 값만 16 진수로 변환됩니다. 런타임에 스코프 변수의 값 변경에서 함수를 호출하려면 필터가 필요합니다. 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

여기에 서비스가 필요없이 num에 $ watch를 간단하게 사용할 수 있습니다. 아래 코드 스 니펫을 참조하십시오. 컨트롤러 코드가 업데이트되었습니다. 확인하십시오.

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.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 - 서비스를 사용하지 않는 양방향 바인딩

답변

관련 문제