Question

我想点击按钮然后打开Modal并传递data-img_id以显示在我的模态id =＆＃34; myModalimgEdit＆＃34;但它没有用到我使用laravel with angularjs。

<div ng-controller="MyCtrl">
  <button my-directive data-toggle="modal" data-img_id="hello world" data-target="#myModalimgEdit">
     My button directive
  </button>
</div>

我的模态在带有按钮的同一刀片中

<!-- Modal -->
    <div class="modal fade text-xs-left" id="myModalimgEdit" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2"><i class="fa fa-picture-o" aria-hidden="true"></i> &nbsp;Add
                        New Image Slide</h4>
                </div>

                    <div class="modal-body">
                        {{igm_idd}}
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="submit" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>                    
            </div>
        </div>
    </div>

    <!-- END MODAL -->

我的Angularjs

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.on('click', function () {
          scope.igm_idd=attrs.imgId;
        })
      }
    }
});

这些解决方案？

Answer 1

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.on('click', function () {
          scope.igm_idd=attrs['data-id'].value;
        })
      }
    }
});

Answer 2

据我所知，带有斜杠的属性在传递给指令时会转换为camelCase。试试attrs.imgId。

但你在这里所做的只是在你的指令中设置一个范围变量。

你应该做两件事：

为你的模态创建一个组件：

myApp.component('modal', {
  template: '<!-- Modal --><div class="modal fade text-xs-left" ... {{igm_idd}} <!-- END MODAL -->',
  controller: ['$scope', 'modalService', function($scope, modalService) {
    $scope.igm_idd = modalService.getImage();
  }]
});

创建服务以在指令与组件之间进行通信

myApp.service("modalSerivce", function () {
  var image;

  this.setImage = function(img) {
    image = img;
  };
  this.getImage = function() {
    return image;
  };
});

然后，您可以使用<modal></modal>创建模态，并在指令中调用modalService.setImage(attrs.imgId);。

您的指令当然需要注入新创建的服务：

myApp.directive('myDirective', ['modalService', function (modalservice) { 
...
}]);

在angularjs中从按钮获取数据属性到模态

2 个答案: