Question

我正在创建一个基于角度1.5.8应用程序的大组件。父组件中大约有18个不同的组件。为此，每个组件模板都具有输入，这些输入是父组件形式的一部分。到目前为止一切正常。我坚持并且真正需要逻辑的是如何检测对每个组件中的输入所做的更改，以便可以将数据保存在共享服务中，以便在将表单数据发送到父组件之前进行获取服务器。

来自父组件

<form name="claimForm" novalidate>
    <!-- Section Title  -->
    <section name="Add new claim" class="section-background section animated fadeIn" ng-cloak>

        <!-- Pharmacy Info -->
        <pharmacy-info claim-form="claimForm"></pharmacy-info>

    </section>
</form>

PharmacyInfo只有一个简单的输入

<md-input-container flex-gt-sm="70">
    <label>Pharmacy Name</label>
    <input type="text"
            flex
            tabindex="4"
            id="pharmacyName"
            name="pharmacyName"
            md-maxlength="80"
            aria-label="Pharmacy Name"
            ng-model="$ctrl.pharmacy.name" />
    <div ng-messages="$ctrl.claimForm.pharmacyName.$error">
        <div ng-message="md-maxlength">
            Pharmacy name is too long!
        </div>
    </div>
</md-input-container>

药房组件

(function () {
    'use strict';

    angular.module('sempp')
        .component('pharmacyInfo', {
            templateUrl: 'Scripts/src/views/pharmacy/pharmacy.info.template.html',
            controller: PharmacyInfoComponentController,
            bindings: {
                claimForm: '<'
            }
        });

    PharmacyInfoComponentController.$inject = ['PharmacyService']

    function PharmacyInfoComponentController(PharmacyService) {
        var $ctrl = this;


        $ctrl.$doCheck = function () {

            //console.log($ctrl.pharmacy);
            PharmacyService.setPharmacy($ctrl.pharmacy);
        }


    }// end controller function

})();

我遇到的问题是我无法更新＆＃34;更新＆＃34;每个组件上的按钮，供用户每次在表单中输入值时单击。它不会太用户友好。

我遇到的另一个问题是使用$ onChanges。它没有检测到对子组件中的表单所做的任何更改。不知道如何实现这一目标。我还在阅读文档。

但是，如果我使用$ doCheck，它会检测到更改，但每次我对表单进行更改时它都会运行。现在，每个组件中有大约18个组件和许多输入表单，我认为这只会减慢应用程序的速度。

我的选择是什么？如何使其无缝化，以便在用户输入值时，该值可以保存在共享服务中，也可以保存在父组件对象中（以较好者为准）。然后我需要将数据发送到要插入的数据库。

Answer 1

在输入上使用ng-change指令：

<md-input-container flex-gt-sm="70">
    <label>Pharmacy Name</label>
    <!-- USE ng-change directive -->
    <input type="text"
            ng-change="$ctrl.updatePharmacyService()"               
            flex
            tabindex="4"
            id="pharmacyName"
            name="pharmacyName"
            md-maxlength="80"
            aria-label="Pharmacy Name"
            ng-model="$ctrl.pharmacy.name" />
    <div ng-messages="$ctrl.claimForm.pharmacyName.$error">
        <div ng-message="md-maxlength">
            Pharmacy name is too long!
        </div>
    </div>
</md-input-container>

ng-change指令仅在用户输入输入时评估其AngularJS Expression。与使用评估每个摘要周期的$doCheck函数相比，这将产生更少的开销。

有关详细信息，请参阅SO: AngularJs 1.5 - Component does not support Watchers, what is the work around?

Answer 2

确保您的父组件可以查看您的子组件中所做的更改，您可以在父组件中执行以下操作：

#round to 0's and "not 0's" and collapse to string
workingstr <- paste0(ifelse(dat$precip == 0, 0, 1), collapse = "")
#find starts
starts <- gregexpr("(^|[^0])0", workingstr)[[1]] + 1
#ends
ends <- gregexpr("0([^0]|$)", workingstr)[[1]]
#output
ans <- matrix(c(rbind(starts,ends)), ncol = 2, byrow = T)

当然这意味着你必须将$ scope注入你的父控制器，但我通常认为这是解决这个问题的最简单方法。

检测子组件中ng-model的更改并传递AngularJS中的数据

2 个答案: