Question

我想从按钮data-id向模态对话框发送一个值。

我写了这个：

按钮HTML

$access_token= "A015DwHUnZn-MCHk4n4ONHWyjjxbAA7jypf-Yn.B3Vzl06w";
         //  $access_token= $result3->refresh_token;
            $ch4 = curl_init();
            curl_setopt($ch4, CURLOPT_URL, "https://api.sandbox.paypal.com/v1/identity/openidconnect/userinfo/?schema=openid");
            curl_setopt($ch4, CURLOPT_HEADER, 'Content-Type: Application/json');
            curl_setopt($ch4, CURLOPT_HEADER, 'Accept-Language:en_US');
            curl_setopt($ch4, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($ch4, CURLOPT_POST, true);
            curl_setopt($ch4, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch4, CURLOPT_HEADER, "Authorization: Bearer ".$access_token);
            curl_setopt($ch4, CURLOPT_FAILONERROR, true);
          //  $information = curl_getinfo($ch4);

            $result4 = curl_exec($ch4);
            if(curl_errno($ch4)){
                echo 'error:' . curl_error($ch4);
            }
            curl_close($ch4);
            $result4 = json_decode($result4);
            echo "USER INFO";
            print_r($result4);

状态角度

<td>
    <select name='size' id='size' class='form-control'>
          <?php foreach ($rows as $row) {?>
            <option value="<?php echo $row['id']?>" <?php if ($row['quantity'] == 0) echo "disabled=disabled"?> >
                <?php echo $row['size']?>
            </option>
          <?php }?>
        </select>
</td>
<td>
    <input type='number' name='quantity' min='1' value='1' class='form-control' />
</td>

指令

<button ui-sref=".modal" btn-attr-click data-id="{{data.nip}}">Simulasi</button>

模态对话框

var routerApp = angular.module('routerApp', ['ui.router','agGrid','angular.filter','ngAnimate']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

        .state('masterpegawai.alltalenta.modal', {
            url: '/modal',
            views:{
                "modal": {
                    templateUrl : 'public/js/modal.html'
                }
            }
         })

}

});

模态确实显示，但data-id = {{data.nip}}＆＃34;没有在模态对话框中显示

Answer 1

由于您使用的是ui-router，因此您只需将ID定义为state parameter（查询或网址参数都适合您）。

然后，您可以使用$stateParams访问所有州的参数。为此，您需要为 masterpegawai.alltalenta.modal 中的模态视图定义控制器。

已修改的州：

.state('masterpegawai.alltalenta.modal', {
  url: '/modal?nip',
    views:{
    "modal": {
      controller: ['$scope', '$stateParams', function ($scope, $stateParams) {
        $scope.nip = $stateParams.nip;
      }],
      templateUrl : 'public/js/modal.html'
    }
  }
})

已修改的按钮：

<button ui-sref=".modal({nip:data.nip})">Simulasi</button>

请注意，由于 nip 通过 $ stateParams 传递，因此不需要 btnAttrClick指令。另请注意，我已为模态视图添加了一个控制器，只是为了将数据（在我们的例子中， nip ）绑定到 $ scope

Answer 2

您需要定义scope = true或scope = false

范围：False（指令使用其父范围）

代码：

routerApp.directive('btnAttrClick', function() {
  return {
    controller: 'simulate',
    scope : false,
    link: function(scope, element, attr) {
      element.on('click', function() {
        scope.nip = attr.id; // parent scope
      })
    }
  }
})

范围：真（指令获得新范围）

代码：

routerApp.directive('btnAttrClick', function() {
  return {
    controller: 'simulate',
    scope:true,
    link: function(scope, element, attr) {
      element.on('click', function() {
        scope.nip = attr.id; // new scope for new element
      })
    }
  }
})

Answer 3

你可以使用angular-ui-bootstarp，我们在bootstrap上创建了指令。

此外你还可以在做出决议中发送数据。

e.g。

var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

在这里你可以看到

resolve: {
            items: function () {
              return $scope.items;
            }
          }

用于将数据发送到modal，在ok上我们得到绑定到范围的相同数据。

如果你想拥有自己的指令，你可以简单地在angular-ui-bootstrap-modal上创建一个包装器。 :) 欲了解更多信息，请看这里：

https://angular-ui.github.io/bootstrap/

AngularJS指令到模态对话框

3 个答案: