如何允许一个指令从Angular Material的多个输入中被使用

How to allow one directive to be used from many inputs in Angular Material?

本文关键字：输入 Material 何允许 一个 指令 Angular      更新时间：2023-09-26

我有以下模板:

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

现在，我想插入一些预定义的文本(在光标位置)到user.post模型，当用户点击<md-menu-content>中的特定项目

我知道具有隔离作用域的指令可能在这里有所帮助，但我不确定如何实现这一点，因为input和按钮本身是独立的，例如它们不是包装在单个ngModel下。

有什么建议吗?

你不需要指令。

如果我理解你的问题，这可能就足够了:

controller: 

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

这是你想要的一个例子:

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>

相关文章：