AngularJs 指令元素子元素给出空
AngularJs Directive element children gives empty
我试图在选项上获取所选节点的内部HTML
<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>
最好使用 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>
为了能够操作"元素",我只是将jquery脚本链接移到angularjs之前。
演示:http://runnable.com/VK5RPx_xRDp8aqF_/angularjs-crossbrowser-select-dropdown-for-jquery-and-javascript
相关文章:
- 指令的模板必须只有一个根元素:With restrict E&替换true
- 在元素指令上添加 css
- replace:true 如何与元素指令一起使用
- 防损层,从角度元素指令传递属性指令
- 角度:在元素指令上添加属性指令
- 如何在 angularjs 中验证元素指令
- 删除对象时执行元素指令动画的角度方式
- 从元素指令中的路由提供程序获取参数
- 基于会话服务的隐藏/显示元素指令-AngularJS
- AngularJS:从控制器中访问元素指令的属性
- 自定义元素指令和属性
- 如何在元素指令上使用ng-if来有条件地调用模块
- 将属性指令传递给元素指令
- 如何在AngularJS中以编程方式计算HTML元素(指令)的属性名
- 正在包装集合指令中元素指令的模板
- 无法正确使用元素指令
- Angularjs嵌套元素指令
- 使用 AngularJS 在选择元素指令中触发消息“onfocusleave”的“console.log”
- Angular自定义元素指令没有显示在屏幕上
- 带ng-init的AngularJS元素指令在视图渲染之前运行