Question

我有几个问题：

如何将数据加载到角度模态中的内容？

如何为任何所选项目加载自定义数据？   .................................................. ...........

这是我的代码：

HTML

<section  ng-controller="ServicesController">
 <div ng-click="toggleModal()" ng-repeat="item in items" class="col-md-4">
      {{ item.name }}
 </div>
     <modal visible="showModal">

    </modal>
</section>

CONTROLLER.JS

myApp.controller('ServicesController', function ($scope) {

$scope.items = [
        {
            "name": "product1",
            "image": "images/img1.jpg",
            "id": "1"
        },
        {
            "name": "product2",
            "image": "images/img2.jpg",
            "id": "2"
        },
        {
            "name": "product3",
            "image": "images/img3.jpg",
            "id": "3"
        },
    ]
      $scope.showModal = false;
      $scope.toggleModal = function(){
      $scope.showModal = !$scope.showModal;
 };
});

 myApp.directive('modal', function () {
     return {
  template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title }}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;


    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });
  }
    };
});

Answer 1

你可以尝试这个最简单的工作代码（也可以从api加载数据）

HTML CODE：

    <button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
 >more info</button>

内部控制器代码将是：

    $scope.customerinfo=[];
$scope.moreinfo= function(customer){
          $scope.customerinfo= customer;
};

HTML Bootstrap模型代码：

    <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->

Answer 2

查看指令documentation，您将看到他们可以使用sintax拥有一个独立的范围：

return {
    restrict: 'E',
    scope: {
      items: '='
    },
    ...
};

使用它，您可以在标签中插入属性，如：

<my-directive items="items" ></my-directive>

然后将这些项目注入指令范围。

如何将数据加载到AngularJS模态？

2 个答案: