Angularjs 变量更新前角度组件触发方法调用

我目前正在重构angular 1.5.8应用程序中的一些代码，以使用组件

（与本指南中的某些步骤非常相似：） 基本情况正常运行

但当我需要让我的组件既更新变量又调用函数（都是从父级绑定的）时，我会遇到一个问题。在这种情况下，函数调用似乎发生在变量绑定之前。因此，当方法在父对象上执行时，它仍然使用变量的旧内容

如何确保在方法执行之前更新变量

请参阅下面代码中的注释，这是reset（）函数的两行

angular.module('searchfieldComponent', [])

.component('searchfieldComponent', {
    templateUrl: "/js/common/components/searchfield.component.tpl.html",
    bindings: {
        labelText: '@',
        searchText: '=',
        searchCallback: '&'
    },
    controllerAs: "vm",
    controller: [function() {

        var vm = this;

        vm.search = function() {
            vm.searchCallback();
        }

        vm.reset = function() {
            vm.searchText = null;
            // When the method bound to searchCallback executes in the parent,
            // the variable bound to searchText has not yet been set to null
            // it is still the old value.
            vm.searchCallback();
        }
    }]
});

---

问题的关键是思考这条线

vm.searchText = null;

。。。做当然，它会更新“child”作用域上设置的值。但“父”值究竟何时更新

通过标准原型继承机制直接“链接”父和子范围变量是不可能的。查询

child.foo

属性时，名称解析将其值替换为

child.\uuuu proto\uuuu.foo

one。但是，一旦您将某些内容分配给

child.foo

，原型的属性就会被隐藏

AngularJS以其商标摘要的方式让你走出这座监狱。在摘要阶段，对子作用域的更改将传播到父作用域（查看更多详细信息）。但是如果你想马上做一些基于此的事情，你就有麻烦了

有什么补救办法？我在评论中建议的一个是最为人所知和尝试过的一个：使用共享对象而不是原语，就像这样

bindings: {
  labelText: '@',
  searchData: '=',
  searchCallback: '&'
}

// then, in vm methods
vm.searchData.searchText = 'anything';

。。。因此，您永远不会更改存储在

vm.searchData

中的引用—而是增加其属性。当两个组件“看”在同一个地方时，显然它们都看到了变化

---

不过，更好的办法可能是重新考虑

searchfieldComponent

的总体结构。我不太清楚为什么这里的父范围应该知道

searchText

的值。请看，Angular component的整个要点是将定义松散的指令转换为具有严格输入和输出集的实体

---

对于一般的

搜索字段

，最好为其提供一些预定义的

默认值

（因此这将是一个输入，用

“>”

符号标记）。但当您需要更改某些内容时，只需让组件通过输出函数发出

changedValue

（类似于

searchCallback

，但名称更好），并将此值作为参数传递到此函数中。

当您使用对象在组件之间传递数据，然后修改其属性时会发生什么？像

searchData:'="; /*...*/ vm.searchData.text=null

有效。谢谢我猜这是因为它一直都是同一个对象，所以我用这种方式避免了时间问题。随意把它作为答案，但我认为包裹在对象是一个解决办法，而不是一个最佳的解决方案。如果没有更好的答案，我会在几天后接受。也许我的组件太小了？如果我可以通过其他方式避免重复代码，则不需要使用组件，这里只有父级知道searchText的上下文。对于组件，它只是一个没有上下文的字符串。该组件提供了一点点通用代码（布局、输入键检测和一个清除文本的按钮）。好吧，但这又有什么关系呢？您仍然需要将该组件的输入和输出正确地解耦，使其成为一个组件，而不仅仅是与父级紧密耦合的扩展。