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>

但是当我使用小写句柄返回小写版本的句柄时，相同的代码也能正常工作。通过调用h3中的函数lowercasehandle（），在html中调用时，下面的示例工作得很好。

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

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

}]);

那么为什么我不能在第一种情况下直接更新lowercasehandle的值。为什么我需要在这里使用一个功能？我在控制器中做出的任何改变都应该在视图中显示出来吗？那么为什么我无法使用第一种方法实现我想要的呢？

Answer 1

在第一种情况下，

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

当用户更新$scope.handle并且仅分配一次时，将不会调用

。使其成为一个函数就像在每个摘要周期中调用一样，然后使用更新的$scope.handle值。

Answer 2

您将句柄定义为空字符串，然后在空字符串上调用过滤器。因此，价值不能再发生变化，并且会保持空字符串。

在你的第二个带有该函数的例子中，该函数在它可能包含一个非空字符串的字符串时对该字符串进行小写，因此它实际上可以小写一些东西。

请注意，您也可以在html中使用过滤器，在这种情况下它可能更合适

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

结论：

第一次尝试是一次性分配，而第二次尝试是在每次事情发生变化时分配。

Answer 3

因为在第一个版本中，您只调用过滤器一次并使用''字符串作为参数。但如果你把它变成一个函数并且每次都调用它，那么它每次都会返回正确的结果。

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

3 个答案: