AngularJS

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

使用 ng-show 代替 ng-if

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

Answer 2

<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'">

如果 table 应该在按钮本身内部，则取消按钮上的单击事件将冒泡到附加按钮，该按钮将关闭并再次打开。

您需要添加一个

event.stopPropagation()

在您的取消函数中，并将 $event 传递给该函数

更新了 Plunker

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

事件冒泡

当你在另一个元素中有一个元素，并且最里面的元素发生了一个事件（这里是点击事件），然后该事件由该元素处理，然后向上传递到 DOM 层次结构所有具有该事件侦听器并由每个事件处理的祖先元素。

这里有一个按钮内嵌一个按钮，两个按钮都有点击事件侦听器。单击内部按钮 (Cancel) 时，侦听器 (Cancel_Append) 处理事件（将值更改为 N），然后将单击传递给 parent/outer 按钮，侦听器 (Initiate_Append_to_JobCard) 处理事件并再次将值更改为 Y。

由于这些几乎是同时发生的，所以我们看不出区别。两个函数都加一个'console.log($scope.This_Page.Append_Get_Number)'就可以看出。

为了防止事件冒泡，我们需要在处理完事件后取消传播。所以我们需要从HTML传递$event对象，然后在"Cancel_Append"处理完事件后，我们需要停止向上传播事件DOM 使用 event.stopPropagation().

看看这个link 以更好地理解事件冒泡

What is event bubbling and capturing?

AngularJS - ng-model 没有正确更新

AngularJS - ng-model not updating correctly

angular-ngmodel

更新了 Plunker

事件冒泡