如何在角度js中获取所选元素

Question

我正在尝试获取菜单选项的选定值。实际上在我的演示中，当我单击按钮时，它显示菜单选项，当用户从菜单中单击任何选择选项并隐藏菜单时，我想获取所选元素文本。

如何从菜单中选择项目或从菜单中选择文本。首先单击按钮显示菜单项然后从菜单中选择任何元素，然后从菜单中获取元素。 http://codepen.io/anon/pen/RPaOQY

   link:function(scope,element,attr){

                $(element).menu();
              $(element).bind('click',function(){
                  alert('--')
                  isMenuVisibles=false;
              })

Answer 1

旨在与第三方库集成的指令（例如用例中的jquery-ui菜单）

使用适当的约定

nope - <ul custommenu isMenuVisible="isMenuVisible"

好 - <ul custommenu is-menu-visible="isMenuVisible"

使用指令参数时，案例在html和定义中发生变化。 read more about it here

  

正常化

     

Angular规范化元素的标记和属性名称   确定哪些元素与哪些指令匹配。我们通常会提到   通过其区分大小写的camelCase规范化名称来指示（例如   ngModel）。但是，由于HTML不区分大小写，我们参考   DOM中的指令通过小写形式，通常使用   DOM元素上的破折号分隔属性（例如ng-model）。

     

规范化过程如下：

     

从元素/属性的前面剥离x-和data-。兑换   ：， - 或_分隔名称为camelCase。例如，以下内容   表格都是等价的，并与ngBind指令匹配：

总结一下，

我会修改你的代码片段：

http://codepen.io/Jossef/pen/eNZobv

<强> HTML

  <div class="menu" ng-show="isMenuVisible">
    <ul custommenu is-menu-visible="isMenuVisible" selected-menu-item="selectedItem">
      <li class="ui-state-disabled">Aberdeen</li>
      <li>Ada</li>
      ...

<强> JS

app.directive('custommenu', function($timeout) {
      return {
        restrict: 'A',
        scope: {
          isMenuVisible: '=',
          selectedMenuItem: '='
        },
        link: function(scope, element, attr) {
          $(element).menu({
            select: function(event, ui) {
              scope.selectedMenuItem = ui.item.text();
              scope.isMenuVisible = false;
              $timeout(angular.noop);
            }
          });

        }
      }
    })