javascript - 为什么以下 Angular 1.6 代码不以这种方式过滤为小写？

Question

这是我的 Controller 代码

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 中通过调用 h3 中的函数 lowercasehandle() 来调用时效果很好。

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

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

}]);

那么为什么我不能在第一种情况下直接更新 lowercasehandle 的值呢？为什么我需要在这里使用函数？我在 Controller 中所做的任何更改都应该显示在 View 中，对吧？那么为什么我使用第一种方法无法实现我想要的呢？

Answer 1

在第一种情况下，

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

当用户更新$scope.handle并且仅分配一次时，不会被调用。将其变成一个函数，就像在每个摘要循环中调用它一样，然后使用 $scope.handle 的更新值。