个人中心
gpt4 book ai didi

javascript - 如何在 Angular js中使用指令触发输入

转载 作者：行者123 更新时间：2023-11-28 07:17:05 25 4
gpt4 key购买 nike

我想用 angularjs 伪造输入。这是 plunk:

http://plnkr.co/edit/N367um2YFjs2mV1KVUWw?p=preview 

 $scope.change=function(){
   var e = document.getElementById("test");
   var $e = angular.element(e);
   $e.triggerHandler('focus');
   e.value = "ala";
   $e.triggerHandler('input');      
 }

我想使用指令来伪造该输入。我已经在 Controller 内部创建了一个函数来伪造输入。这个功能是通过 ng-click 按钮触发的。现在我想在指令内实现该函数，以便在加载指令时它可以为我伪造输入。我已经尝试过，但该指令并未更改 Controller 中的模型。我知道有一种方法可以做到这一点，需要将 ng-model 传递到指令中。但我想知道是否有更好的解决方案？

最佳答案

您可以使用指令的 compile 方法。您可以在其中获取指令的文本，然后将其替换为按钮标记。

然后您还可以使用指令的属性来指定虚假输入的目标。

compile 的返回是 postLink 方法，您可以在其中将单击事件附加到按钮。如果您想自动运行假事件，只需直接在此 link 方法中添加代码即可。

请查看更新后的插件here或以下(相同的代码)。

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope) {
});

'use strict';

angular.module('mgcrea.ngStrapDocs')

.controller('TypeaheadDemoCtrl', function($scope, $templateCache, $http) {

  $scope.selectedState = '';
  $scope.states = function(){
    return ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
}
  $scope.selectedIcon = '';
  $scope.icons = [
    {value: 'Gear', label: '<i class="fa fa-gear"></i> Gear'},
    {value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'},
    {value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'},
    {value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'}
  ];
  
  $scope.change=function(){
      var e = document.getElementById("test");
      var $e = angular.element(e);
       $e.triggerHandler('focus');
        e.value = "ala";
      $e.triggerHandler('input');
      
  }

  $scope.selectedAddress = '';
  $scope.getAddress = function(viewValue) {
    var params = {address: viewValue, sensor: false};
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
    .then(function(res) {
      return res.data.results;
    });
  };

})

.directive('fakeTest',['$compile', function($compile){
   return {
     restrict:'E',
     scope:{},
     compile: function(element, attrs) {
       var fakeText = element.text();
      console.log(fakeText);
      var template = '<button ng-click="triggerFake()">click dir</button>';
      
      return function postLink(scope,element,attrs){
        element.replaceWith($compile(template)(scope));
        scope.triggerFake = function() {
          //console.log('clicked', attrs.target);
          var e = document.getElementById(attrs.target); //"test");
          var $e = angular.element(e);
           $e.triggerHandler('focus');
            e.value = fakeText;
           $e.triggerHandler('input');
           //$scope.$digest();
        }
      };
     }
   }
  
}]);
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
    <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.jsdelivr.net/angularjs/1.3.15/angular.min.js" data-semver="1.3.15"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.3.15/angular-animate.min.js" data-semver="1.3.15"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.3.15/angular-sanitize.min.js" data-semver="1.3.15"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.2.4"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.2.4"></script>
    <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.2.4"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div class="bs-docs-section" ng-controller="TypeaheadDemoCtrl">

  <div class="page-header">
    <h1 id="typeaheads">Typeaheads <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js" target="_blank">typeahead.js</a>
    </h1>
    <code>mgcrea.ngStrap.typeahead</code>
  </div>


  <h2 id="typeaheads-examples">Examples</h2>
  <p>Add quick, dynamic typeahead functionality with any form text input.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Selects require the <a href="#tooltips">tooltip module</a> and <a href="//github.com/mgcrea/angular-strap/blob/master/src/helpers/parse-options.js" target="_blank">parseOptions helper</a> module to be loaded.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="typeahead/docs/typeahead.demo.html" data-content-js-url="typeahead/docs/typeahead.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip></a></h3>
  <pre class="bs-example-scope">$scope.selectedState = "{{selectedState}}";
$scope.states = {{states}};

$scope.selectedIcon = "{{selectedIcon}}";
$scope.icons = "{{icons}}";

$scope.selectedAddress = "{{selectedAddress}}";
</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label><i class="fa fa-globe"></i> State</label>
        <input id="test" type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states()" placeholder="Enter state" bs-typeahead>
      </div>
      <div class="form-group">
        <label>Icon</label>
        <input type="text" class="form-control" ng-model="selectedIcon" data-min-length="0" data-html="1" data-auto-select="true" data-animation="am-flip-x" bs-options="icon as icon.label for icon in icons" placeholder="Enter icon" bs-typeahead>
      </div>
      <button ng-click="change();">click</button>
      <fake-test target="test">ala</fake-test>
      <hr>
      <!-- Using an async data provider -->
      <div class="form-group">
        <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small></label>
        <input type="text" class="form-control" ng-model="selectedAddress" data-animation="am-flip-x" bs-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" placeholder="Enter address" bs-typeahead>
      </div>
    </form>
  </div>
</div>

  </body>

</html>

关于javascript - 如何在 Angular js中使用指令触发输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30740377/

25 4 0
文章推荐： c++ - 64 位和 32 位工具在一个环境中运行
文章推荐： python - 快速通过套接字发送整数
文章推荐： css - 缩放后菜单链接从面板中跳出
文章推荐： c++ - 在我自己的类中捕获并处理所有异常
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com