AngularJS - двустороннее связывание не работает с использованием сервиса

Я изучаю Угловое использование W3Schools.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>

Когда я обновить текстовое поле, то «HEX» часть не обновляется. Зачем?

источник

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 на num. См. Ниже фрагмент кода, он обновит ваш 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 не обновляется, потому что нет возможности для его обновления.

hexacy.myFunc вызывается только один раз, когда контроллер загружается в первый раз.

Если вы хотите, чтобы свойство $ scope.hex изменилось с помощью num, вам может потребоваться смотреть на свойство num.

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

функция передается в $ Scope. $ Часы будут называться каждый раз значение $ scope.num изменений.

для получения дополнительной информации см https://docs.angularjs.org/api/ng/type/$rootScope.Scope (раздел часов)

Надеется, что это помогает.

источник

2016-08-19 11:24:04

Ваше текстовое поле привязывается только к 'num'.
'$ scope.hex не привязан к вашему текстовому полю'. Так что это не обновление при вводе текста. Вы можете использовать '$ watch' в 'num'. 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 - двустороннее связывание не работает с использованием сервиса

ответ

Смежные вопросы