Question

我有这段HTML：

:
:
<td ng-if="Curr_State == 'Edit' && This_Page.Data_Changed == false" style="max-width:300px">
    <button type="button"
            class="FD" 
            ng-click="Initiate_Append_to_JobCard()" 
            style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
        <font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
        </font>
        <font size="2">
            {{This_Page.Append_Get_Number}}
            <table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">
                <tbody>
                    <tr>
                        <td>
                            <label for="Append_Number"> #:</label>
                        </td>
                        <td>
                            <input string-to-number
                                   id="Append_Number"
                                   type="number" 
                                   class="form-control" 
                                   ng-model="This_Page.Append_Number"
                                   min="0"
                                   step="1"
                                   style="width:70px;margin:0px">
                        </td>
                        <td>
                            <button class="btn btn-success" 
                                    ng-click="Do_Append()" 
                                    title="Proceed with Append"
                                    type="button">
                                <font size="2" color="white">
                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                </font>
                         </button>

                        </td>
                        <td>
                            <button class="btn btn-danger" 
                                    ng-click="Cancel_Append()" 
                                    title="Cancel Append request"
                                    type="button">
                                <font size="2" color="white">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </font>
                         </button>

                        </td>
                    </tr>
                </tbody>
            </table>
        </font>
    </button>
</td>
:
:

以及控制器中的以下两个函数：

$scope.Initiate_Append_to_JobCard = function() {
    $scope.This_Page.Append_Get_Number = "Y" ;
}

//////////////////////////////////////////////////////////////////

$scope.Cancel_Append = function() {
    $scope.This_Page.Append_Get_Number = "N"   ;
    $scope.This_Page.Append_Number     = null  ;
}

单击外部按钮时，$scope.This_Page.Append_Get_Number设置为"Y"并正确显示内部对象。

单击“取消”按钮时，将调用函数$scope.Cancel_Append，将$scope.This_Page.Append_Get_Number的值设置为"N"（函数的第一个语句），但此更改不会传播到HTML。事实上，我添加了{{This_Page.Append_Get_Number}}，最初显示N，然后显示Y，无论我点击取消按钮多少次，它都会保持不变。

Answer 1

<button type="button"
            class="FD" 
            ng-click="Initiate_Append_to_JobCard()" 
            style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
        <font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
        </font>
        <font size="2">
            {{This_Page.Append_Get_Number}} </font></button>

<table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">

如果表格应位于按钮本身内，则“取消”按钮上的点击事件将冒泡到“附加”按钮，该按钮将关闭并再次打开。

您需要添加

event.stopPropagation()

在取消功能中

并将 $ event 传递给该功能

更新了Plunker

https://embed.plnkr.co/CEHNggASaVGqkqfamdEx/

事件冒泡

当你在另一个元素中有一个元素并且在最里面的元素上发生一个事件（这里是click事件）时，该元素处理该事件，然后将它传递给DOM层次结构到所有具有祖先元素的元素。该事件的监听者，由每个人处理。

这里有一个按钮内的按钮，两者都有click事件监听器。单击内部按钮（取消）时，侦听器（Cancel_Append）处理事件（将值更改为N），然后将单击传递到父/外部按钮，侦听器（Initiate_Append_to_JobCard）处理事件并将值更改为Y再次。

由于这些几乎同时发生，我们无法看到差异。可以通过在两个函数中添加'console.log（$ scope.This_Page.Append_Get_Number）来看到。

为了防止事件冒泡，我们需要在处理事件后取消传播。所以我们需要从HTML传递 $ event 对象，然后在“Cancel_Append”处理事件之后，我们需要使用event.stopPropagation（）停止在DOM上进一步传播事件

请查看此链接，以便更好地了解事件冒泡

What is event bubbling and capturing?

Answer 2

使用ng-show代替ng-if

<td ng-show="Curr_State == 'Edit' && This_Page.Data_Changed == false" style="max-width:300px">

AngularJS - ng-model无法正确更新

2 个答案:

更新了Plunker

事件冒泡