在关闭时显示模态窗口的内容或在angularjs

时间:2018-03-27 17:43:49

标签: javascript jquery angularjs

我最近刚开始使用Angular JS并遇到了模态对话框的问题。 我有一个非常简单的问题,我想要的是模态窗口内的两个文本输入字段,以便在关闭或打开模态窗口时清除它们。 模态上的文本字段与newPlan.NamenewPlan.Description

绑定

我在控制器中创建了以下方法来清除字段:

$scope.ClearForm = function() {
        $scope.newPlan = {};
    }

如果我通过单击按钮来调用此方法,则文本字段会自行擦除但是当我在模态的hide / show / hidden / shown事件上调用此方法时,字段不会清除其文本但会显示一些有趣的内容一旦我开始输入一个输入字段,另一个输入字段就会变空。

这就是我清除模态隐藏事件的字段的方式。

 $('#AddLeavePlanWindow').on('hide.bs.modal', function() {
  angular.element("#AppElement").scope().ClearForm();
 });

其中#AppElement是html中指定ng-app和ng-controller标记的元素。 这是JSFiddle链接https://jsfiddle.net/9kxdj3vv/67/

在我看来,当模态关闭/打开时会发生奇怪的事情,同时Angular会更改值,尽管值已更改但它们不会反映在UI上。但是当模态保持打开状态时,它可以正常工作。

我不想在关闭按钮上调用ClearForm();方法,因为我希望能够点击屏幕上的任意位置来关闭模态并仍然清除字段因此使用.on('hide.bs.modal'我是开放使用hidden/show/shown

有人可能也会指出我不应该同时使用Angular和jQuery,它们是正确的但我现在不认为这是问题,我将完全转移到Angular但首先我需要知道这里出了什么问题,为什么它不起作用。

我感谢所有的帮助, 提前谢谢。

1 个答案:

答案 0 :(得分:0)

你可以使用$ scope。$ digest();在你的代码中

class MyClass
{
     public string email_address { get; set; }
     public string status { get; set; }
}

List<MyClass> data = new List<MyClass>() { new MyClass() { email_address = "email1@email.com", status = "good2go" }, new MyClass() { email_address = "email2@email.com", status = "good2go" } };

//Serialize
var json = JsonConvert.SerializeObject(data);

//Deserialize
var jsonToList = JsonConvert.DeserializeObject<List<MyClass>>(json);