javascript - modal 和 ng-bind-html 的问题

Question

我使用模态 Bootstrap ，这里是代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body" ng-bind-html="modalData">

            </div>
        </div>
    </div>
</div>

这是一个从文件中获取 html 的函数

$scope.modal = function(path, name){
    $scope.ModalObj = $scope.Objects[FindNumber(name, $scope.Objects)];
    $http.get(path).success(function(data) {
         $scope.modalData = data;
    });
};

这是 html 文件

<h4>BUILD</h4>
<div>
    <img ng-class="{opac: ModalObj.Commit.Build.Debug == false}" src="IMG/computer-md.png">
    <img ng-class="{opac: ModalObj.Commit.Build.Release == false}" src="IMG/computer-md.png">
</div>
<span class="debug">Debug</span><span>Release</span>
<span class="time">{{ModalObj.Commit.Build.Timefin}}</span>

但是程序在该模态中找不到$scope的变量，我该怎么办？

Answer 1

您是否在 Controller 函数中依赖注入(inject)了 $scope ？

如果是这样，即使现在您遇到同样类型的错误，我希望您使用模态启动指令并使用指令的嵌入，您可以将您想要在模态中添加必要的 HTML 代码。

模态指令:

       fmApp.directive('modal', function () {
       return {
         template: '<div class="modal fade">' + 
        '<div class="modal-dialog modal-lg">' + 
         '<div class="modal-content">' + 
          '<div class="modal-header" style="background-color:black;color:white;">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color :red">&times;</button>' + 
            '<h2 class="modal-title" style="font-weight: bolder;">{{ title }}</h2>' + 
          '</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');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
    });
  }
};
});

以及您想要在模式中包含的内容:

       <modal title="Job Activity Details..." visible="showJobActivityModal">   
           <div >
                   //type what ever the contents or elements you want
           </div>   
       </modal>