Javascript 为什么下面的Angular 1.6代码没有以这种方式过滤成小写？

这是我的控制器代码

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>www.twitter.com/{{lowercasehandle | lowercase}}</h3>

www.twitter.com/{{lowercasehandle | lowercase}

结论:

第一次尝试是一次性分配，而第二次则是每次情况发生变化时分配

在第一种情况下

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

---

当用户更新了

$scope.handle

并且仅将其分配为一次时，将不会调用。在每个摘要循环中调用它时，将其转换为函数将起作用，然后使用更新后的值

$scope.handle

，因为在第一个版本中，您只调用一次筛选器，并且以“”字符串作为参数。

---

但是，如果您将它设置为函数并每次调用它，那么它每次都会返回正确的结果。

但是当我在html页面上输入内容时，它会同时更改$scope.handle的值，这反过来会改变LowercaseShandle的值，它会作为更新后的值呈现在页面上，然后它会再次调用该函数。但是可能只是坚持使用html版本的过滤器，可能会更容易@ravy根据双向数据绑定，我在html输入中更新的内容将在控制器函数中更新，对吗？所以，第一个代码不是每次用户在输入字段中输入一些数据时都会更新吗？如果是这样的话，是否应该一次又一次地应用过滤器，而不是只应用一次？因此，您可以使用“角度观察”来观察任何变量的变化

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