如何在Angular JS中使用指令触发输入

Question

I want to fake input with angularjs. 我想用angularjs伪造输入。 Here is the plunk: 这是小问题：

http://plnkr.co/edit/N367um2YFjs2mV1KVUWw?p=preview 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');      
 }

I want to use a directive to fake that input. 我想使用指令来伪造该输入。 I've already make a function inside the controller to fake the input. 我已经在控制器内部创建了一个函数来伪造输入。 And this function is triggered by ng-click in the button. 并通过ng单击按钮触发此功能。 Now I want to implement the function inside the directive so that when the directive is loaded it could fake the input for me. 现在，我想在指令内部实现函数，以便在加载指令时可以为我伪造输入。 I've tried but the directive is not changing the model in the controller. 我试过了，但是指令没有更改控制器中的模型。 And I know there's one way to do it, which needs to pass in the ng-model into the directive. 而且我知道有一种方法可以将ng-model传递到指令中。 But I'm wondering whether there's better solutions to it? 但是我想知道是否有更好的解决方案？

Answer 1

You could use the compile method of the directive. 您可以使用指令的compile方法。 There you can get the text of the directive before you replace it with the button markup. 在将指令文本替换为按钮标记之前，可以在此获取指令文本。

Then you can also use the attributes of the directive to specify the target of your fake input. 然后，您还可以使用指令的属性来指定伪输入的目标。

The return of compile is the postLink method where you can attach the click event to your button. 编译的返回是postLink方法，您可以在其中将click事件附加到按钮上。 If you want to run the fake event automatically just add the code directly in this link method. 如果要自动运行假事件，只需在此link方法中直接添加代码。

Please have a look at the updated plunker here or below (same code). 请在此处或下方（相同的代码）查看更新的插件。

 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>

如何在Angular JS中使用指令触发输入

问题描述

1 个解决方案

解决方案1
0 2015-06-09 21:17:37

如何在Angular JS中使用指令触发输入

问题描述

1 个解决方案

解决方案1 0 2015-06-09 21:17:37

解决方案1
0 2015-06-09 21:17:37