AngularJs 指令元素子项给出空答案

【问题标题】：AngularJs Directive element children gives emptyAngularJs 指令元素子项给出空
【发布时间】：2015-01-06 11:46:37
【问题描述】：

我试图在选项上获取所选节点的 innerHTML

<i class="before"></i> 标记应接收来自同一组的选定页面或页面加载的第一个选项的文本。但是只有硬编码的下拉菜单在加载时才会获得价值，而 ngRepeat 的下拉菜单不会得到任何东西。

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) {
  
    $scope.investments = [
      {"name": "AARP Operating Funds"},
      {"name": "Some Big Title"},
      {"name": "I hatez IE8"},
      {"name": "I Love FF DeveLoper Edition"},
      {"name": "Give Me Some Sunshine"}
    ];

    $scope.investment = $scope.investments[0].name;


  })
  .directive('dropdownSelectBox', function(){


    return function(scope, element, attrs) {

      //.filter('option[value="' +  element.find('select').val() + '"]').text()

      console.log(element.find('select').children());

      if (element.find('select').val() == '') {
        element.find('i').text($('select').eq(0).text());
      } else {
        element.find('i').text(element.find('select').children()[0].innerHTML);
      }

      element.find('select').bind('change', function(){                    
          element.find('i').text($(this).find(':selected').text());
      });
      
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">

  <span class="dropdown" dropdown-select-box="">
      
      <i class='before'></i>
      <select id="timePeriod">
          <option value="7" selected="selected">Last 7 Days </option>
          <option value="30">Last 30 Days </option>
          <option value="60">Last 60 Days </option>
          <option value="current">Current Year </option>
          <option value="prior">Prior Year</option>
      </select>

    </span>


    <span class="dropdown" dropdown-select-box="">
      
      <i class='before'></i>
      <select ng-options="opt.name as opt.name for opt in investments | orderBy:'name'" ng-model="investment"></select>

    </span>

</div>

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

最好使用ng-model：

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) {
  
    $scope.investments = [
      {"name": "AARP Operating Funds"},
      {"name": "Some Big Title"},
      {"name": "I hatez IE8"},
      {"name": "I Love FF DeveLoper Edition"},
      {"name": "Give Me Some Sunshine"}
    ];

    $scope.investment = $scope.investments[0];
    $scope.period = 'Last 7 Days';

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">

  <span class="dropdown" dropdown-select-box="">
      
      <i class='before'>{{period}} {{investment.name}}</i>
      <select id="timePeriod" ng-model="period">
          <option value="Last 7 Days" selected="selected">Last 7 Days </option>
          <option value="Last 30 Days">Last 30 Days </option>
          <option value="Last 60 Days">Last 60 Days </option>
          <option value="Current Year">Current Year </option>
          <option value="Prior Year">Prior Year</option>
      </select>

    </span>


    <span class="dropdown" dropdown-select-box="">
      
      <i class='before'></i>
      <select ng-options="opt.name for opt in investments | orderBy:'name'" ng-model="investment"></select>

    </span>

</div>

【讨论】：

感谢您的回复。但<i class='before'></i> 必须为空。因为在一个页面中大约有 6-7 个下拉列表，我不想每次都添加模型，而且模型名称每次都必须不同，因为我要为每个下拉列表创建新的控制器。那没有意义。
那么最好将下拉菜单和标签封装在指令模板中。
我无法创建模板，因为在这种情况下，您可以看到 1 个下拉列表是硬编码的，另一个来自控制器的 ngOptions。
您可以将第一个下拉列表的数据从 HTML 移动到控制器。如您所见，angular 没有像 jQuery 那样解析 HTML 结构的功能。像您的代码示例那样依赖 DOM 结构并不是一个好方法。

【解决方案2】：

为了能够操作“元素”，我只是将 jquery 脚本链接移到了 angularjs 之前。

演示：http://runnable.com/VK5RPx_xRDp8aqF_/angularjs-crossbrowser-select-dropdown-for-jquery-and-javascript

【讨论】：