How to Remove a Dynamically Generated Popover in Angular

Question

How to Remove a Dynamically Generated Popover in Angular

As a newcomer to angular, I successfully implemented a bootstrap popover around selected text using the following function:

 $scope.highlight = function () {

        var a = document.createElement("a");
        a.setAttribute('tabindex', "0");
        a.setAttribute('data-toggle','popover');
        a.setAttribute("id","1");
        a.setAttribute('data-content',"<button type='button' class='btn btn-default' ng-click='deleteLabel()'><small><span class='glyphicon glyphicon-remove'></span></small></button>");
        a.setAttribute('data-html','True');

        if (window.getSelection) {
                var sel = window.getSelection()
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(a);
                sel.removeAllRanges();
                sel.addRange(range);
        }

        $timeout(function(){
          $('[data-toggle="popover"]').popover();
        }, 50);
    };

Within the above code, the popover includes a button that should trigger the deleteLabel() function upon click. This function is supposed to remove the element:

 $scope.deleteLabel= function(){
            alert("removing label");
            var labelEl=document.getElementById("1");
            labelEl.remove();
        };

However, it seems like deleteLabel() is not being executed when the button in the popover is clicked. Is there an issue with how I'm calling this function from within the popover?

javascript angularjs twitter-bootstrap

Answer 1

Answer №1

Here is a more Angular approach using ngBootbox; you can check out the live example on Plunker. In essence, it's recommended to steer clear of directly manipulating the DOM as done in jQuery. Angular excels at abstracting this complexity through features like directives such as ngBootbox. If there's a jQuery plugin you wish to integrate, look for an equivalent Angular wrapper.

If I've grasped your needs accurately, there are two pop-ups implemented: one for adding elements and another for confirming element deletions.

var app = angular.module('plunker', ['ngBootbox']);

app.controller('MainCtrl', ['$scope', '$ngBootbox', function($scope, $ngBootbox) {
  var vm = this;

  vm.name = 'World';
  vm.categories = ['Category 1', 'Category 2'];

  vm.prompt = function() {

    $ngBootbox.prompt('Enter a new category?')
      .then(function(result) {
        console.log('Prompt response: ' + result);
        vm.categories.push(result);
      }, function() {
        console.log('Prompt dismissed!');
      });

  }

  vm.delete = function(index) {
    console.log('delete index=' + index + ' value=' + vm.categories[index]);
    $ngBootbox.confirm('Are you sure you want to delete ' + vm.categories[index] + ' ?')
      .then(function(result) {
        // Remove element
        vm.categories.splice(index, 1);
      }, function() {
        // Do nothing
        console.log('Prompt dismissed!');
      });
  }
}]);

When adding, I trigger a prompt where users can input a category that gets added to the array upon confirmation, automatically updating the page.

For deletion, I utilize the $index from ng-repeat to determine which element to remove. Upon user confirmation, the selected item is removed from the array using splice, with Angular taking care of the UI update.

and the HTML:

<body ng-controller="MainCtrl as vm">
  <p>Hello {{vm.name}} !</p>
  <ul>
    <li ng-repeat="c in vm.categories">{{c}} <a href="" ng-click="vm.delete($index)">Delete</a></li>
  </ul>
  <a href="" ng-click="vm.prompt()">Add Category</a> 
</body>

ngBootbox: AngularJS wrapper for Bootbox.js, which simplifies implementing Twitter Bootstrap modals for alerts, confirms, and prompts. ngBootbox consists of three directives, each corresponding to alert, confirm, and prompt functionalities.

Bootbox.js: A concise JavaScript library enabling creation of dialog boxes utilizing Bootstrap modals programmatically, without fuss over managing required DOM elements or JS events. Here’s a basic example:

Considering your beginner status in Angular, I adopted the controller as syntax and vm=this pattern to circumvent potential $scope complications; here's an informative read: AngularJS's Controller As and the vm Variable

Answer 2

Here is a more Angular approach using ngBootbox; you can check out the live example on Plunker. In essence, it's recommended to steer clear of directly manipulating the DOM as done in jQuery. Angular excels at abstracting this complexity through features like directives such as ngBootbox. If there's a jQuery plugin you wish to integrate, look for an equivalent Angular wrapper.

If I've grasped your needs accurately, there are two pop-ups implemented: one for adding elements and another for confirming element deletions.

var app = angular.module('plunker', ['ngBootbox']);

app.controller('MainCtrl', ['$scope', '$ngBootbox', function($scope, $ngBootbox) {
  var vm = this;

  vm.name = 'World';
  vm.categories = ['Category 1', 'Category 2'];

  vm.prompt = function() {

    $ngBootbox.prompt('Enter a new category?')
      .then(function(result) {
        console.log('Prompt response: ' + result);
        vm.categories.push(result);
      }, function() {
        console.log('Prompt dismissed!');
      });

  }

  vm.delete = function(index) {
    console.log('delete index=' + index + ' value=' + vm.categories[index]);
    $ngBootbox.confirm('Are you sure you want to delete ' + vm.categories[index] + ' ?')
      .then(function(result) {
        // Remove element
        vm.categories.splice(index, 1);
      }, function() {
        // Do nothing
        console.log('Prompt dismissed!');
      });
  }
}]);

When adding, I trigger a prompt where users can input a category that gets added to the array upon confirmation, automatically updating the page.

For deletion, I utilize the $index from ng-repeat to determine which element to remove. Upon user confirmation, the selected item is removed from the array using splice, with Angular taking care of the UI update.

and the HTML:

<body ng-controller="MainCtrl as vm">
  <p>Hello {{vm.name}} !</p>
  <ul>
    <li ng-repeat="c in vm.categories">{{c}} <a href="" ng-click="vm.delete($index)">Delete</a></li>
  </ul>
  <a href="" ng-click="vm.prompt()">Add Category</a> 
</body>

ngBootbox: AngularJS wrapper for Bootbox.js, which simplifies implementing Twitter Bootstrap modals for alerts, confirms, and prompts. ngBootbox consists of three directives, each corresponding to alert, confirm, and prompt functionalities.

Bootbox.js: A concise JavaScript library enabling creation of dialog boxes utilizing Bootstrap modals programmatically, without fuss over managing required DOM elements or JS events. Here’s a basic example:

Considering your beginner status in Angular, I adopted the controller as syntax and vm=this pattern to circumvent potential $scope complications; here's an informative read: AngularJS's Controller As and the vm Variable

Answer 3

Answer №2

There's a better approach to handling this task. Consider utilizing AngularJS directives for DOM manipulation or incorporating libraries such as Bootstrap UI.

The issue with your current implementation lies in the fact that the DOM element created using createElement is not properly bound.

Answer 4

There's a better approach to handling this task. Consider utilizing AngularJS directives for DOM manipulation or incorporating libraries such as Bootstrap UI.

The issue with your current implementation lies in the fact that the DOM element created using createElement is not properly bound.

Answer 5

Answer №3

Check out this live plunker example showcasing the popover feature. Users can select text, click on highlight, and a link is generated using the provided code which triggers the delete function upon clicking the delete button. To ensure ng-click functionality, I compile the element with:

$compile(a)($scope);

The content is displayed within a div marked 'mycontent' for identification to delete selected text:

<body ng-controller="MainCtrl as vm">
  <p id='mycontent'>{{ vm.content }}</p>
  <button ng-click="vm.highlight()">Highlight</button>


  <script type="text/ng-template" id="tpl.html">
    <div class="popover-content">
      <div>
        <div>
          <span>{{link.title}}</span>
        </div>
        <div>
          <button ng-click='vm.delete()'>Delete</button>
        </div>
      </div>
    </div>
  </script>
</body>

This application is built based on your code structure:

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

app.controller('MainCtrl', function($scope, $compile, $timeout) {
  var vm = this;
  vm.window = window;

  vm.content = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum';

  vm.delete = function() {
    console.log('delete' + vm.selectedText);
    var d = document.getElementById('mycontent');

    var olddiv = document.getElementById('todelete');

    d.removeChild(olddiv);
  };

  vm.highlight = function() {

    var a = document.createElement("a");

    a.setAttribute('id', 'todelete');
    a.setAttribute('uib-popover', '');
    a.setAttribute('popover-trigger', 'click');
    a.setAttribute('popover-placement', 'top');
    a.setAttribute('ng-click', "info()");
    a.setAttribute('data-html', 'True');
    a.setAttribute('data-content', 'Some content');
    a.setAttribute('uib-popover-template', "'tpl.html'");


    $compile(a)($scope);

    if (window.getSelection) {
      var sel = window.getSelection()
      var text = "";
      if (window.getSelection) {
        text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
      }
      vm.selectedText = text;
      var range = sel.getRangeAt(0).cloneRange();
      range.surroundContents(a);
      sel.removeAllRanges();
      sel.addRange(range);
    }

  };

  vm.getSelectionText = function() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }
    return text;
  };

});

Answer 6

Check out this live plunker example showcasing the popover feature. Users can select text, click on highlight, and a link is generated using the provided code which triggers the delete function upon clicking the delete button. To ensure ng-click functionality, I compile the element with:

$compile(a)($scope);

The content is displayed within a div marked 'mycontent' for identification to delete selected text:

<body ng-controller="MainCtrl as vm">
  <p id='mycontent'>{{ vm.content }}</p>
  <button ng-click="vm.highlight()">Highlight</button>


  <script type="text/ng-template" id="tpl.html">
    <div class="popover-content">
      <div>
        <div>
          <span>{{link.title}}</span>
        </div>
        <div>
          <button ng-click='vm.delete()'>Delete</button>
        </div>
      </div>
    </div>
  </script>
</body>

This application is built based on your code structure:

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

app.controller('MainCtrl', function($scope, $compile, $timeout) {
  var vm = this;
  vm.window = window;

  vm.content = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum';

  vm.delete = function() {
    console.log('delete' + vm.selectedText);
    var d = document.getElementById('mycontent');

    var olddiv = document.getElementById('todelete');

    d.removeChild(olddiv);
  };

  vm.highlight = function() {

    var a = document.createElement("a");

    a.setAttribute('id', 'todelete');
    a.setAttribute('uib-popover', '');
    a.setAttribute('popover-trigger', 'click');
    a.setAttribute('popover-placement', 'top');
    a.setAttribute('ng-click', "info()");
    a.setAttribute('data-html', 'True');
    a.setAttribute('data-content', 'Some content');
    a.setAttribute('uib-popover-template', "'tpl.html'");


    $compile(a)($scope);

    if (window.getSelection) {
      var sel = window.getSelection()
      var text = "";
      if (window.getSelection) {
        text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
      }
      vm.selectedText = text;
      var range = sel.getRangeAt(0).cloneRange();
      range.surroundContents(a);
      sel.removeAllRanges();
      sel.addRange(range);
    }

  };

  vm.getSelectionText = function() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }
    return text;
  };

});

How to Remove a Dynamically Generated Popover in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Eliminate items from a list that have duplicate properties

Utilizing React Native for seamless deep linking with automatic fallback to a webpage, including the ability to pass

Tips for sharing a global variable across numerous functions in various files

I'd like to change the name of the JSON key retrieved from the API request

Verify in Jquery whether a table row contains no elements with a specified class before removing any duplicates

AngularJS $http.post() response function not executing in the correct sequence

Is it possible to utilize TypeScript code to dynamically update the JSON filter with variable values?

Struggling to get Canvas2ImagePlugin to function properly within an Ionic app and Angular.js

Building New Web Pages with Express in Node.JS

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Retrieve a form (for verification purposes) from a separate AngularJS component

Combining data from an object within an array in JavaScript

Identifying a Malformed URI in JavaScript

What is the best way to determine the file size using Node.js?

A technique, such as regular expressions, can be used to detect the quantity of newline characters in the text entered by the user in a text area

Converting data to JSON geometry format for implementation in Three.js

Retrieve information from a variety of selected checkboxes

Is there a way for me to modify the formatting of the text that I

Access previous value in Vuejs onchange event

Having trouble with React's conditional rendering not working as expected?