Add HTML content to an element within a directive and create a custom function to manipulate it locally

Question

Add HTML content to an element within a directive and create a custom function to manipulate it locally

In my AngularJS application, I am faced with a variety of complex inputs scattered throughout. Some inputs utilize directives for autocompletion functionality, like those powered by Google Places or Twitter Bootstrap.

I am currently exploring the concept of creating a directive that would mimic the iOS feature of displaying an erase button when text is entered.

Although I attempted to implement this directive, I encountered issues with the scope.erase not initializing, as well as the ng-show not functioning as expected.

Is it feasible to dynamically add HTML elements after the text input and manipulate them within the controller?

Here is the directive I experimented with:

app.directive('eraseBtn', function($parse, $compile){

return {
    require: 'ngModel',
    restrict: "A",
    transclude: true,
    link : function(scope, element, attrs, model){

        element.parent().append('<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>');

        scope.erase = function(){
            console.log('Erase test');
        }
    }
}
});

I am reluctant to utilize a template since the HTML structure of my inputs varies significantly.

javascript angularjs directive

Answer 1

Answer №1

To dynamically create custom inputs within the link function of your directive based on the model's values, you can utilize the $compile service in AngularJS. This allows you to bind these elements to the model and effectively construct them using directives. Don't forget to invoke the compiled template with the model data.

Sample HTML Code

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

  <head>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div demo-directive ng-repeat="input in inputs"></div>
  </body>

</html>

Sample JavaScript Code

angular.module('demo', []).
  controller('demoController', function($scope) {
    $scope.inputs = [{
      inputType: 'checkbox',
      checked: true,
      label: 'input 1'
    }, {
      inputType: 'text',
      value: 'some text 1',
      label: 'input 2'
    }];

    $scope.doSomething = function() {
      alert('button clicked');
    };
  }).
  directive('demoDirective', function($compile) {
    return {
      template: '<div><label>{{input.label}}: </label></div>',
      replace: true,
      link: function(scope, element) {
        var el = angular.element('<span/>');
        switch(scope.input.inputType) {
          case 'checkbox':
            el.append('<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>');
            break;
          case 'text':
            el.append('<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=\'\'; doSomething()">X</button>');
            break;
        }
        $compile(el)(scope);
        element.append(el);
      }
    }
  });

Check out the Plunker for a live example: http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview

Answer 2

To dynamically create custom inputs within the link function of your directive based on the model's values, you can utilize the $compile service in AngularJS. This allows you to bind these elements to the model and effectively construct them using directives. Don't forget to invoke the compiled template with the model data.

Sample HTML Code

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

  <head>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div demo-directive ng-repeat="input in inputs"></div>
  </body>

</html>

Sample JavaScript Code

angular.module('demo', []).
  controller('demoController', function($scope) {
    $scope.inputs = [{
      inputType: 'checkbox',
      checked: true,
      label: 'input 1'
    }, {
      inputType: 'text',
      value: 'some text 1',
      label: 'input 2'
    }];

    $scope.doSomething = function() {
      alert('button clicked');
    };
  }).
  directive('demoDirective', function($compile) {
    return {
      template: '<div><label>{{input.label}}: </label></div>',
      replace: true,
      link: function(scope, element) {
        var el = angular.element('<span/>');
        switch(scope.input.inputType) {
          case 'checkbox':
            el.append('<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>');
            break;
          case 'text':
            el.append('<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=\'\'; doSomething()">X</button>');
            break;
        }
        $compile(el)(scope);
        element.append(el);
      }
    }
  });

Check out the Plunker for a live example: http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview

Add HTML content to an element within a directive and create a custom function to manipulate it locally

Answer №1

Similar questions

Invoke the do_action function with JavaScript/jQuery

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Getting an alert message upon clicking an element in angularjs

What is the best way to test an AngularJS directive and monitor function calls with a spy?

Is it possible to use the .map() method on an array with only 3 items and add 2 additional placeholders?

The challenge of handling scopes in Angular-seed

Creating dynamically generated routes in Angular or Angular 9 before initialization

Wait for the canvas to fully load before locating the base64 data in HTML5

Tips on generating a sample Mongoose Model with all null values

What is the best way to eliminate <p><br></p> tags from a summernote value?

Incorporating a new data series into your candlestick chart with Highstock

React Router will not remount the component when using this.context.router.push

AngularJS - Sending configuration values to a directive

Halt the Bootstrap carousel while entering text in a textarea

What is the proper way to write a function that verifies the presence of a key in an object and then retrieves the associated value?

Sending Node.js variables to HTML with the help of Ajax

What is the method for implementing a Redirect in React Router?

Get Code Now Button

How can I display an array of data with a changing name using a FlatList in React Native?

Angular service sending an HTML file instead of a JSON file