从指令

时间:2015-11-16 12:10:27

标签: javascript jquery html angularjs angularjs-scope

我有一个验证消息,在页面加载时设置为使用ng-show隐藏。然后,用户可以单击以删除条目,并通过将ng-show值设置为false来向他们显示成功的删除确认消息。

我现在想要在用户点击关闭'x'按钮时将验证消息框设置为隐藏。

这必须尽可能动态,因为可以显示各种不同的验证消息,用于添加新条目,编辑和输入,删除一个等等。所以我想保持尽可能干燥,JQuery得到'x '并将$ scope值更改为false。

以下是代码:

初始化模块。

var app = angular.module('myGUI', []);

设置控制器。

angular.module('myGUI').controller('DisplayController', function($scope){
    $scope.deleteModal = false;
    $scope.successAdded = false;
});

指令。

app.directive ('closeMessage', function() {
    return {
        restrict: 'C',
        transclude: true,
        link: function (scope) {
            $('.close-alert').on('click', function() {
                var messageToClose = $(this).parent().attr('ng-show');
                scope[messageToClose] = false;
            });
        }
    }
});

和HTML。

<div class="alert-added alert-success  col-xs-12" ng-show="successAdded">
    <h2>Success!</h2>
    <i class="fa fa-check-circle close-message"></i> You have successfully added an entry <i class="fa fa-times close-alert"></i>
</div>

我希望这是有道理的。真的很感谢你们所能提供的任何帮助。

非常感谢,

1 个答案:

答案 0 :(得分:0)

<i>元素

上的<div class="alert-added alert-success col-xs-12" ng-show="successAdded"> <h2>Success!</h2> <i class="fa fa-check-circle close-message"></i> You have successfully added an entry <i class="fa fa-times close-alert" ng-click="successAdded = false"></i> </div> 下方进行操作
if (FileUpload.HasFile)
{

    string path = string.Concat((Server.MapPath("~/Temp/" + FileUpload.FileName)));
    FileUpload.PostedFile.SaveAs(path);
    OleDbConnection OleDbCon = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + path + ";Extended Properties=Excel 12.0;");

    OleDbCommand cmd = new OleDbCommand("Select * from [Sheet1$]", OleDbCon);
    OleDbDataAdapter objAdapter = new OleDbDataAdapter(cmd);


    OleDbCon.Open();
    DbDataReader dr = cmd.ExecuteReader();
    string con_str = ConfigurationManager.ConnectionStrings[1].ConnectionString;

    SqlBulkCopy bulkInsert = new SqlBulkCopy(con_str);
    bulkInsert.DestinationTableName = "[dbo].[HP_temp]";
    bulkInsert.WriteToServer(dr);
    OleDbCon.Close();

    Array.ForEach(Directory.GetFiles((Server.MapPath("~/Temp/"))), File.Delete);
    Label_UploadMsg.ForeColor = Color.Green;
    Label_UploadMsg.Text = "Imported sucess";

}
else
{
    Label_UploadMsg.ForeColor = Color.Red;
    Label_UploadMsg.Text = "Error";
}

您可以使用angular-ui中的alert directives来提供内置的此功能。