angularJS获取指令的内部元素

时间:2015-03-03 18:20:04

标签: javascript jquery angularjs

简短概述:

我需要做自动对焦,借助它我可以点击回车键进入下一个输入并使用键 - 似乎我完成了:但现在我尝试获取输入的属性,因为我和#39;我想知道的angularjs的新手:如何以最好的方式做到这一点?

<div modal-focus>
    <div>
        <input type="text" class="on-input" name="name" modal-focus-order="1"/>
    </div>
    <div>
        <input type="text" class="on-input" name="jobTitle" modal-focus-order="2"/>
    </div>  
</div>

如何在modal-focus指令链接函数中使用此代码:

angular.element('.on-input').on('click', function(event) {
  console.log(element.find(this)); // how to get modal-focus-order value like 1 or two?
});

element.bind("keypress", function(event) {
  if (event.which === 13) {
    /* some magic is here */
  }
});

当我点击输入时,我可以获得modal-focus-order值?

1 个答案:

答案 0 :(得分:0)

我创建了一个显示解决方案的plunker。检查链接。它记录my-directive =“VALUE”的值

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

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <span my-directive='123456'></span>
  </body>

</html>





var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.clickme=function(){
    alert('clicked');


    console.log($('#xx').attr('my-directive'));
  }
});


app.directive('myDirective',function(){

  return {
      restrict:'AE',
      replace: true,
      template: function(scope,elem, attr) {
        var newElem = '<input id="xx" type="button" ng-click="clickme()" value="click on me" />';
        return newElem;
      }
    };


})