Question

我在这里使用modal 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

您是否依赖注入$scope在控制器的功能中？

如果是这样，即使现在你也会遇到同样的错误，我希望你选择指令进行模态启动并使用指令＆＃39; s 转换你可以把你想要的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>

modal和ng-bind-html的问题

1 个答案: