Angularjs 组件，是否通过反模式函数传递一个方向绑定？

Question

angular.module("app").component("first", {
   controller: function() {
      this.getFoo = () => {
         return this.condition ? this.foo : null;
      };
      this.changeCondition = () => {
        this.condition = !this.condition; 
      }
   }
   template: '<div>hello <second foo="$ctrl.getFoo()"></second>' + 
   '<button ng-click="$ctrl.changeCondition()"></button></div>'
})
.component("second", {
   bindings: {
     foo: "<"
   },
   template "<span>using foo here: {{$ctrl.foo}}</span>"
})

有点愚蠢的例子，但我在一个项目中看到过以这种方式将值传递给子组件。我四处寻找有关这是反模式的建议，但找不到任何建议。

是吗？是否存在将值从函数的 return 传递给子组件是一件好事的场景？

否则在我看来显而易见的事情是从 "first"-组件传递 $ctrl.foo。

Answer 1

$watch 表达式中函数的任何使用都是反模式。（当你写 <component prop="..." 它会创建一个手表）

原因是这个函数值是计算每个摘要的，所以你的函数运行每个摘要。在正常的应用程序中，你会消化时间~观察者的数量，但如果你有功能——谁知道呢？您必须挖掘每个功能以分析时间。函数也可以修改另一个变量，触发另一个摘要。等等

Angularjs 组件，是否通过反模式函数传递一个方向绑定？

Angularjs component, is passing one direction binding through function an Anti pattern?

angularjs

angular-components