What is the best way to enable one directive to be utilized across multiple inputs in Angular Material?

Question

What is the best way to enable one directive to be utilized across multiple inputs in Angular Material?

Here is a code snippet that I am working with:

<md-input-container class="new-paragraph addon-menu">
    <label>Post text</label>
    <textarea ng-model="user.post" rows="3"></textarea>
</md-input-container>
<md-menu>
    <md-button aria-label="" class="md-icon-button" ng-click="$mdOpenMenu($event)">
        <i class="fa fa-plus-square-o mobile-menu-ic light-gray-text font-size-extra-large"></i>
    </md-button>
    <md-menu-content>
        <md-menu-item ng-repeat="templateVariable in templateVariables">
            <md-button ng-click="injectVariableAtCursor(templateVariable);">{{templateVariable}}</md-button>
        </md-menu-item>                                                             
    </md-menu-content>
</md-menu>

I would like to add predefined text (at cursor position) to the user.post model when a user clicks on a specific item within the <md-menu-content>.

I understand that using directives with isolated scope could be beneficial, but I am unsure how to go about implementing this since the input and buttons are not directly related under a single ngModel.

Any ideas or suggestions?

javascript angularjs

Answer 1

Answer №1

You can achieve the desired outcome without using a directive.

Based on my understanding of your issue, the following code snippet should suffice:

controller :

$scope.injectVariableAtCursor = function(templateVariable) {
 $scope.user.post = templateVariable;
};

Here's a demonstration of the functionality you are looking for :

var myController = function($scope) {
  var target = null;
  
  $scope.user = { post: "first" };
  
  $scope.handleFocus = function(event) {
    target = event.target;
  };
  
  $scope.handleClick = function(text) {
    var start, end, actual = $scope.user.post;
    
    if(target) {
      start = target.selectionStart;
      end = target.selectionEnd;
    }else{
      start = end = $scope.user.post.length;
    }
    
    
    $scope.user.post = actual.substr(0,start) + text + actual.substr(end, actual.length);
  };
};

angular.module('controller', [])
  .controller('myController', myController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="controller">
  <div ng-controller="myController">
    <textarea ng-model="user.post" ng-focus="handleFocus($event)"></textarea>
    
    <button ng-click="handleClick('bla')">add bla</button>
  </div>
  
</div>

Answer 2

You can achieve the desired outcome without using a directive.

Based on my understanding of your issue, the following code snippet should suffice:

controller :

$scope.injectVariableAtCursor = function(templateVariable) {
 $scope.user.post = templateVariable;
};

Here's a demonstration of the functionality you are looking for :

var myController = function($scope) {
  var target = null;
  
  $scope.user = { post: "first" };
  
  $scope.handleFocus = function(event) {
    target = event.target;
  };
  
  $scope.handleClick = function(text) {
    var start, end, actual = $scope.user.post;
    
    if(target) {
      start = target.selectionStart;
      end = target.selectionEnd;
    }else{
      start = end = $scope.user.post.length;
    }
    
    
    $scope.user.post = actual.substr(0,start) + text + actual.substr(end, actual.length);
  };
};

angular.module('controller', [])
  .controller('myController', myController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="controller">
  <div ng-controller="myController">
    <textarea ng-model="user.post" ng-focus="handleFocus($event)"></textarea>
    
    <button ng-click="handleClick('bla')">add bla</button>
  </div>
  
</div>

What is the best way to enable one directive to be utilized across multiple inputs in Angular Material?

Answer №1

Similar questions

What is the best way to determine if an application has been installed on an Android device while browsing a website?

What is the best way to generate an empty object that mimics the structure of an object within an array of objects in AngularJS

A guide to updating a particular row and sending parameters with jQuery and AJAX

Having issues with the jQuery .css function?

Exploring Object Elements using For Loop

The page loads successfully at first, but upon refreshing, a 404 error occurs when using Zeit, Nextjs, and now

Conceal the div on larger screens and display it on mobile devices

How can we display or conceal text indicating the age of a patient based on the value returned from selectedPatient.age in a React application?

Executing a function when a webpage loads in Javascript

Optimal Placement of jQuery Event Handlers in React/Redux Components with Asynchronous Data Loading

Unable to Retrieve Modified Content with $().text();

What is the process for creating separate files for modal controllers?

"Implementing a 2D graphical user interface on a three.js

Updating AngularJS views based on window resizing

Encountering an error message stating "Please enable JavaScript to run this application" when making React API calls after deploying a ReactJs app on the Firebase server

Pause file uploads, display modal popup, then resume uploading

When ran automatically as a cron job, the JavaScript script fails to establish a connection with MongoDB

Save the function as a local variable and preserve the reference to the current object

The onclick attribute on a button in HTML is not functioning properly following the inclusion of an Ajax load

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size