CODEWITHSUNDEEP
angularjs
boggy
boggy

Reputation: 4027

How do I display the inner html of directive inside a dialog?

What do I want to do? I want to have a directive with some html inside. The directive renders a button and when the button is clicked I open a modal dialog. I want to display the html declared inside the directive in the dialog. Different spots where I use the directive might have different html messages in the modal dialog.

Here is the code that I've got.

app.js:

var app = angular.module('plunker', ['ngResource', 'ui.bootstrap', 'ui.bootstrap.modal']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})
.controller('dialogController', ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
  $scope.info = params.info;
  $scope.close = function () {
    $modalInstance.dismiss('cancel');
  };
}])
.directive('someDirective', ['$modal', '$timeout',  function ($modal, $timeout) {
  return {
    scope: {       
      title: '@title'
    },
    restrict: 'AE',
    replace: true,
    templateUrl: 'someDirective.html',
    transclude: true,
    link: function ($scope, $element, attr, controller, transclude) {

     //transclude(function(clone, scope) {
    //   debugger;
    //  });
      
      $scope.info = "test"; // I would like to set this to the value within the inner html of the directive.

      $scope.openDialog = function () {
        var modalInstance = $modal.open({
          templateUrl: 'dialog.html',
          controller: 'dialogController',
          backdrop: 'static',
          windowClass: 'ie-app-modal-window-narrow',
          resolve: {
            params: function () {
              return {
                info: 'SomeHtml' //<-- here I want to it to the html from inside someDirective
              };
            }
          }
        });
        modalInstance.result.then(function () {
          },
          function () { });
      };
    }
  };
}])


;

dialog.html:

<!DOCTYPE html>
<html>
<head>
  <title>Add attachment</title>
  <meta charset="utf-8"/>
</head>
<body>
<div class="modal-header">
  <button type="button" class="close"><span aria-hidden="true" ng-click="close()">&times;</span></button>
  <strong>Add Attachment</strong>

</div>
<div class="modal-body">

  <!-- Text input-->

  <div class="alert alert-info" role="alert">
    {{info}}
  </div>
</div>

<div class="modal-footer">
  <div class="form-group">
    <div style="float: left">
      <button class="btn btn-default" ng-click="close()" ng-disabled="isDisabled">Close</button>
    </div>
  </div>
</div>


</body>
</html>

index.html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="[email protected]" data-semver="0.4.0" src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
    <script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular-resource.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <some-directive title="Hello">
      <b>Testing</b>
    </some-directive>
  </body>

</html>

someDirective.html:

<div class="panel panel-default" >
  <div class="panel-heading">
    {{title}}
  </div>
  <div class="panel-body" ng-style="loadingStyle">
    <button class="btn btn-sm btn-default" ng-click="openDialog();" type="button">Open</button>
  </div>
</div>

I found this: How to get inner html of custom directive? but I don't know exactly how it would work in my case. I am not using the compile method.

Plnker

Thanks

Upvotes: 0

Views: 1362

Answers (3)

boggy
boggy

Reputation: 4027

Based on this posting, I managed to find something that works for the specific angularjs versions that I am using. I made another plnkr.

The relevant changes are:

dialog.html: I used <div ng-bind-html="info"></div>

<!DOCTYPE html>
<html>
<head>
  <title>Add attachment</title>
  <meta charset="utf-8"/>
</head>
<body>
<div class="modal-header">
  <button type="button" class="close"><span aria-hidden="true" ng-click="close()">&times;</span></button>
  <strong>Add Attachment</strong>

</div>
<div class="modal-body">

  <!-- Text input-->

  <div class="alert alert-info" role="alert">
    <div ng-bind-html="info"></div>
  </div>
</div>

<div class="modal-footer">
  <div class="form-group">
    <div style="float: left">
      <button class="btn btn-default" ng-click="close()" ng-disabled="isDisabled">Close</button>
    </div>
  </div>
</div>


</body>
</html>

app.js - I added the controller property in the someDirective directive and the code grabs the html and sets the info property.

var app = angular.module('plunker', ['ngResource', 'ui.bootstrap', 'ui.bootstrap.modal']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  })
  .controller('dialogController', ['$scope', '$modalInstance', 'params', function($scope, $modalInstance, params) {
    $scope.info = params.info;
    $scope.close = function() {
      $modalInstance.dismiss('cancel');
    };
  }])
  .directive('someDirective', ['$modal', '$timeout', '$sce', function($modal, $timeout, $sce) {
    return {
      scope: {
        title: '@title',
        html: '@'
      },
      restrict: 'AE',
      replace: true,
      templateUrl: 'someDirective.html',
      transclude: true,
      controller: function($scope, $element, $attrs, $transclude) {
        $transclude(function(clone,scope){
             $scope.info = angular.element('<div>').append(clone).html().trim();
          });
      },
      link: {
       pre: function (scope, iElement, iAttrs, controller) { 
         //debugger;
       },
       post: function($scope, $element, attr, controller) {

          //transclude(function(clone, scope) {
          //   debugger;
          //  });
          //debugger;
          //$scope.info = "test"; // I would like to set this to the value within the inner html of the directive.
          //debugger;
          $scope.openDialog = function() {
            var modalInstance = $modal.open({
              templateUrl: 'dialog.html',
              controller: 'dialogController',
              backdrop: 'static',
              windowClass: 'ie-app-modal-window-narrow',
              resolve: {
                params: function() {
                  return {
                    info: $sce.trustAsHtml($scope.info) //<-- here I want to set it to the html from inside someDirective
                  };
                }
              }
            });
            modalInstance.result.then(function() {},
              function() {});
          };
        }
      }
    };
  }])


;

Upvotes: 0

Ninja
Ninja

Reputation: 2098

If I understood it correctly, this is what you want, http://plnkr.co/edit/tOe8tZ5VWfOCkocQaEKo?p=preview

$scope.info = $element.get(0).innerHTML.trim();

Upvotes: 1

Tim Andrews
Tim Andrews

Reputation: 847

To Pass value from someDirective to dialog. First inject $rootScope into someDirective like so:

directive('someDirective', ['$modal', '$timeout', '$rootScope',  function ($modal, $timeout, $rootScope) {

Now we create a new scope and add a value to it (in this case, $scope.info), and pass it into the modalScope. angular will then pass this along to the modal's controller as the $scope variable.

$scope.info = "test";

  $scope.openDialog = function () {
    var modalScope = $rootScope.$new();
    modalScope.info = $scope.info;
    var modalInstance = $modal.open({
      scope: modalScope,
      templateUrl: 'dialog.html',
      controller: 'dialogController',
      backdrop: 'static',
      windowClass: 'ie-app-modal-window-narrow',
    });
    modalInstance.result.then(function () {

    },
    function (result) { 
    });
  };

So inside the modal's controller we have access to variable we just passed in!

.controller('dialogController', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
    console.log($scope.info); //prints "test"
    $scope.close = function () {
      $modalInstance.dismiss('cancel');
    };
  }])

Now the opposite. To pass from modal back to someDirective: There's several ways but in my opinion the best way is to use the promises. modalInstance.result returns a promise. This promise is resolved if the modal is closes and rejected if the modal is dismissed. Whether resolved or rejected, a value/object can be passed along as a parameter.

Example, opening the dialog as before:

$scope.info = "test";

  $scope.openDialog = function () {
    var modalScope = $rootScope.$new();
    modalScope.info = $scope.info;
    var modalInstance = $modal.open({
      scope: modalScope,
      templateUrl: 'dialog.html',
      controller: 'dialogController',
      backdrop: 'static',
      windowClass: 'ie-app-modal-window-narrow',
    });
    modalInstance.result.then(function (returnStuff) {
      //This is called when the modal is closed.
      //returnStuff is whatever you want to return from the dialog when it's closed
    },
    function (returnStuff) { 
       //This is called when the modal is dismissed.
      //returnStuff is whatever you want to return from the dialog when it's dismissed
    });
  };

And to actually close/cancel the dialog:(from inside the dialog)

//pass any value you want back
$modalInstance.close({foo:"Ayyylmao", bar:42});
$modalInstance.dismiss('dismissed');

Upvotes: 1

Related Questions