Почему следующий код Angular 1.6 не фильтруется в нижнем регистре таким образом?

Question

это мой код контроллера

myApp.controller('MainController',['$scope','$filter',function($scope,$filter){ 

    $scope.handle = ''; 
    $scope.lowercasehandle = $filter('lowercase')($scope.handle); 

}]); 

и это HTML часть

<div class="container" ng-controller="MainController"> 

    <div> 
    <label for="">What is your twitter handle?</label> 
    <input type="text" ng-model="handle"> 
    </div> 
    <h3>www.twitter.com/{{lowercasehandle}}</h3> 

</div> 

но тот же код работает, когда я делаю lowercasehandle функция возврата строчную версию ручки. В приведенном ниже примере отлично работает при вызове в html, вызывая функцию lowercasehandle() в h3.

myApp.controller('MainController',['$scope','$filter',function($scope,$filter){ 

$scope.handle = ''; 
$scope.lowercasehandle = function() { 
    return $filter('lowercase')($scope.handle); 
}; 

}]); 

Так почему я не могу напрямую обновить значение нижнего регистра в первом случае. Зачем мне нужно использовать функцию здесь? Какие изменения, которые я делаю в контроллере, должны отображаться в представлении? Итак, почему я не могу добиться того, что хочу, используя первый метод?

Answer 1

В первом случае

$scope.lowercasehandle = $filter('lowercase')($scope.handle); 

не будет вызываться, когда $scope.handle обновляется пользователем и назначается только один раз, как. Включение его в функцию работает так, как оно вызывается в каждом цикле дайджеста, который затем использует обновленное значение $scope.handle.

Answer 2

Вы определяете дескриптор как пустую строку и затем вызываете фильтр на пустой строке. Таким образом, значение больше не может измениться и останется пустой строкой.

В вашем втором примере с функцией функция уменьшает строку в то время, когда она, вероятно, содержит строку, отличную от пустой строки, поэтому она может фактически что-то сделать.

Обратите внимание, что вы можете использовать фильтр в вашем HTML тоже, в этой ситуации может быть более подходящим

<h3>www.twitter.com/{{lowercasehandle | lowercase}}</h3> 

Вывод:

Первая попытка это задание один раз, в то время как второй присваивает каждый раз, когда что-то меняется.

Answer 3

Потому что в первой версии вы вызываете фильтр только один раз, а в качестве аргумента - строку ''. , но если вы сделаете это функцией и назовете ее каждый раз, она будет возвращать правильный результат каждый раз.