将表单名称转换为指令

时间:2017-06-16 08:26:48

标签: angularjs-directive

我有一个模态弹出窗口。要打开模态弹出窗口我有以下代码

mymodule.directive('modalDialogSite', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, 
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
        if (attrs.overflow)
        scope.dialogStyle.overflow = attrs.overflow;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

在视图页面中,代码如下

<a data-toggle="modal" role="button" class="btn btn-success" ng-click="add_site()" data-backdrop="static"><i class="icon-bookmark"></i><b>Add Site</b></a>

<modal-dialog-site show='modalShown_site'>
          <?php echo $this->load->view('sites/modal_sites/content/add_website');?>
</modal-dialog-site>

当我点击此按钮时,它会转到我的控制器中的add_site()功能,我已经给出了如下代码

mymodule.controller('myCtrl',function($scope){

    $scope.modalShown_site = !$scope.modalShown_site;

    $scope.add_sute = function()
    {
        $scope.modalShown_site = ! $scope.modalShown_site;
    }

});

其实我已经加载了我的表格

<modal-dialog-site show='modalShown_site'> <?php echo $this->load->view('sites/modal_sites/content/add_website');?‌​> </modal-dialog-site>

我的表格就像

<form id='frmAddSite' name='frmAddSite' novalidate angular-validator angular-validator-submit="add_website(frmAddSite)" class="form-horizontal form-validate"  method="POST">
        <label for="textfield" class="control-label">Name</label>
        <input name='site_name' ng-model="text.site_name" required required-message="'Site name  is required'" type="text">
    <input type="submit"  class="btn btn-primary" value="Submit">
    <button type="button" ng-click="frmAddSite.reset();add_site_cancel()" class="btn" data-dismiss="modal" aria-hidden="true">cancel</button>
</form>

在这种情况下,如何将表单名称转换为指令?

1 个答案:

答案 0 :(得分:1)

在此示例中,我们创建了一个指令,以获取元素name的某些属性idform

    app.directive('myDirective', function () {
        return {
            transclude: true,
            template: '<div class="something" ng-transclude></div>',
            link: function(scope, element) {
                var formName = element.find("form").attr("name");
                var formId = element.find("form").attr("id");
                console.log(formName);
                console.log(formId);
            }
        }
    });