具有动态表达式的ng-options不起作用 [英] ng-options with a dynamic expression is not working
问题描述
我正在尝试创建一个成角度的directive，以替换常规下拉菜单.我需要能够将动态表达式设置为ng-options，但是在指令内部似乎不起作用.
I'm trying to create a directive in angular, to replace the regular dropdown. I need to be able to set a dynamic expression to ng-options but doesn't seem to be working inside the directive.
它在外面完美地工作.
It works perfectly outside it.
这是指令
angular.module('app.dropdown',[])
.directive('swDropdown',[ function ( ){
return {
restrict: 'E',
replace: true,
template:'<div><select ng-model="swModel" ng-options="{{expression}}" ></div>',
link: link,
scope:{
swOptions:"=",
swLabel:'@',
swValue:'@',
swModel:"="
}
};
function link (scope, element, attrs) {
scope.defaultText = angular.isDefined(attrs.swDefaultText)?attrs.swDefaultText:'Choose';
scope.selected = scope.defaultText;
scope.expression = 'item as item.name for item in swOptions';
}
}]);
控制器示例:
angular.module('app',['app.dropdown']).controller('Ctrl', function($scope){
$scope.model="";
$scope.expression = 'item as item.name for item in options';
$scope.options = [
{id:1,name:'hola'},
{id:2,name:'chau'}]
});
HTML:
<body ng-app="app" ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
Working dropdown<br/>
<select ng-model="model" ng-options="{{expression}}"></select>
<br/>
Not working inside a directive
<sw-dropdown sw-model="model" sw-options="options"></sw-dropdown>
</body>
关于它为什么不起作用的任何线索?
Any clue about why it is not working?
谢谢！
推荐答案
这是一个很好的问题.归根结底，当<select>由Angular处理时，ng-options必须具有一个值.
This is a good question. At the end of the day, ng-options needs to have a value when <select> is being processed by Angular.
1)您可以在预链接"功能中对其进行设置:
1) You can either set it up in the "pre-link" function:
.directive('swDropdown',[function (){
return {
...
link: {
pre: function(scope){
scope.expression = "item as item.name for item in swOptions";
},
post: // your normal link function
}
}
}]);
2)或者，如果您很懒，可以只将ng-if="expression"添加到模板中，并保持所有相同:
2) Or, if you are lazy, you could just add ng-if="expression" to the template, and keep everything the same:
.directive('swDropdown',[function (){
return {
...
template: '<div><select ng-if="expression" ng-model="swModel" ng-options="{{expression}}"></select></div>',
link: link // this is treated as post-link
}
function link(scope, element){
// ...
}
}]);
3)如果您的表达式确实确实需要可变和可修改(看起来像一个奇怪的情况，应该使用更合适的ViewModel来解决)，那么您就需要强制重新编译:
3) if your expression is truly needs to be mutable and modifyable (seems like a weird case and should probably be address with a more suitable ViewModel), then you'd need to force re-compilation:
function link(scope, element){
...
scope.changeExpression = function(newExpression){
scope.expression = newExpression;
// $compile should be injected into your directive's function
$compile(element)(scope);
}
}
顺便说一句，只需在当前链接函数中添加$compile(element)(scope);即可解决问题.
Btw, just adding $compile(element)(scope); to your current link function would do the trick.
这篇关于具有动态表达式的ng-options不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
