CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
Alexander Bondarenko
Alexander Bondarenko

Reputation: 207

Problems with modal and ng-bind-html

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>

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

and here is the html file

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

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

Upvotes: 1

Views: 1345

Answers (1)

Nishi Bangar
Nishi Bangar

Reputation: 958

Have you dependency-injected $scope inside the controller's function?

If so even now you get the same kind of error, I would prefer you to go with the Directive for modal initiation and using the directive's transclude you can just put the necessary HTML code you want inside the modal.

Modal directive:

       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 you want inside the modal:

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

Upvotes: 1

Related Questions