Question

我正在使用AngularJS 1.5创建一系列动态表单组件。

我使用ng-if显示和隐藏表单组件。当组件被销毁时，我将它从它的父节点中删除并放入数组，但我也想将我传入的双向绑定对象的值设置为null。

以下是我正在使用的代码的简化版本：

app.component('textInput', {
    bindings: {
        model: '='
    },
    require: {
        parent:'^formPanel'
    },
    templateUrl: 'app/shared/form/formFields/textInput/textInputView.html',
    controller: function() {

        var self = this; 

        this.$onInit = function() {
            this.parent.addField(this);
        },
        this.$onDestroy = function() {
            this.model = null;
            console.log(this);
            this.parent.removeField(this);
        }
    }
});

这会将值记录为null，但是在组件范围之外，angular没有注册更改，我无法运行摘要周期，因为$ onDestroy事件已经在进行中。< / p>

Answer 1

您应该可以使用回调来实现此目的。

所以在父作用域中这是一个与此类似的函数（这是回调）：

<a href="http://www.tolkien.co.uk/index.html" style="text-decoration:none" onmouseover="style='text-decoration:underline'" onmouseout="style='text-decoration:none'">J.R.R. Tolkien</a>

这在组件HTML文件中将回调传递给组件：

$scope.setMyModel = function(val){
  $scope.myModel = val;
};

这是在组件的绑定中收集回调：

<test-input
  my-model="myModel"
  my-callback="setMyModel " 
/>

跟随$ onDestroy函数中的回调调用：

bindings: {
  myModel: '=',
  myCallback: '='
},

可能有更好的方法，但这将确保父范围始终控制设置this.$onDestroy = function() { this.myCallback(null); this.parent.removeField(this); }所持有的值。

在Angular 1.5 Component中更新双向绑定值$ onDestroy

1 个答案: