模态和NG绑定HTML的问题 [英] Problems with modal and ng-bind-html

问题描述

我在这里使用模式的引导是code

I use modal bootstrap here is a code

<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文件中的函数

here is a function that get html from file

$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>

但事实证明，该PROGRAMM找不到$范围在这一模式的变量，我该怎么办？

but it turned out that the programm can't find $scope's variable in that modal, what shall i do?

推荐答案

具有u依赖注入的 $范围控制器的功能在里面，？

Have u dependency injected $scope inside the controller's function,?

如果这样即使现在u得到同样的有点错误，我会preFER u到去与指令模态启动和使用指令的 transclude U可以只是把必要的HTML $ C $立方米想要的模式里面。

if so even now u get the same kinda error, i would prefer u to go with the Directive for modal initiation and using the directive's transclude u can just put the necessary html code u want inside the modal.

模态指令

       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;
      });
    });
  }
};
});

和内容ü希望的模式里面..

And the contents u want inside the modal ..

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

这篇关于模态和NG绑定HTML的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！