modal 和 ng-bind-html 的问题答案

【问题标题】：Problems with modal and ng-bind-htmlmodal 和 ng-bind-html 的问题
【发布时间】：2015-08-06 03:25:30
【问题描述】：

我在这里使用模态引导是一个代码

<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的变量，我该怎么办？

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

您是否在控制器的函数中注入了依赖项$scope？

如果是这样，即使现在你也遇到了同样的错误，我希望你使用 Directive for modalinitions 并使用该指令的 transclude 你可以把模态框内所需的必要 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>

【讨论】：