我有一个问题，我的指令递归建立一个选择输入。
我有一些具有一些功能的模块，这个功能可以有一些像这样的子功能：
[
0: {
module_name : administration
fonctions : [
{
fonction_id : 1
fonction_name : getAdministration
children : [
{
fonction_id : 2
fonction_name : getParameters
children : []
},
{
fonction_id : 3
fonction_name : getModules
children : []
},
...
]
},
]
},
1: {
module_name : Account
fonctions : [
{
fonction_id : 4
fonction_name : CreateAccount
children : []
},
{
fonction_id : 5
fonction_name : EditAccount
children : []
},
....
]
},
...
]
目标是在每个模块的选择中构建 optgroup 并输入选项此模块的每个功能以及该功能有孩子，继续在同一个 optgroup 上创建一个新的 optgroup 来获得这个结果：
<select>
<optgroup label='Administration'>
<option value='1'>getAdministration</option>
<option value='2'>getParameters</option>
<option value='3'>getModules</option>
...
</optgroup>
<optgroup label='Account'>
<option value='1'>CreateAccount</option>
<option value='2'>EditAccount</option>
...
</optgroup>
</select>
制作这些指令时，我受到了这篇文章的启发：http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
请参阅我的两个指令：
WcSelectOptionGroup：
angular.module('app.administration').directive('wcSelectOptionGroup', function()
{
return {
restrict: 'E',
replace: true,
scope: {
elts: '=',
selectId: '='
},
template: '<select><optgroup' +
'label="{{ elt.module_name }}"' +
'ng-repeat="elt in elts">' +
'<wc-select-option' +
'ng-repeat="fnct in elt.fonctions"' +
'ng-selected="fnct.fonction_id === selectId"' +
'item="fnct"' +
'selectId="selectId">' +
'</wc-select-option>' +
'</optgroup></select>',
link: function(scope)
{
console.log('hello 1!!!!!!!');
}
};
});
和第二个：
WcSelectOption：
angular.module('app.administration').directive('wcSelectOption', function($compile)
{
return {
restrict: 'E',
replace: true,
scope: {
item: '=',
selectId: '='
},
template: '<option' +
'value="{{ item.fonction_id }}"' +
'ng-selected="item.fonction_id === selectId">' +
'{{ item.fonction_title }}' +
'</option>',
link: function(scope, element, attrs)
{
console.log('hello 2!!!!!!!');
angular.forEach(scope.item.children, function(child)
{
$compile('<wc-select-option' +
'item="child"' +
'selectId="selectId">' +
'</wc-select-option>')
(scope, function(cloned, scope)
{
element.append(cloned);
});
});
}
};
});
和html：
<select
class="form-control"
name="parent"
ng-model="fonction.fonction_parent_id"
required>
<option
value="0"
ng-selected="fonction.fonction_parent_id === null">
Aucun
</option>
<optgroup label="{{ $root.getWord('Functions not assigned') }}">
<option
ng-repeat="fnct in fonctions.not_assigned"
value="{{ fnct.fonction_id }}"
ng-selected="fnct.fonction_id===fonction.fonction_parent_id">
{{ fnct.fonction_name }}
</option>
</optgroup>
<wc-select-option-group
elts="modules"
selectId="fonction.fonction_parent_id">
</wc-select-option-group>
</select>
当我运行应用程序时，指令WcSelectOptionGroup不会执行，因为当我放入console.log（'hello 1 !!!'）时没有发生任何事情...... 我不明白为什么。
所以，如果你有一些想法:) 提前谢谢
答案 0 :(得分：0)
最终我找到了解决办法：）
我做了3个指令：WcSelect，WcSelectOptionGroup和WcSelectOption
参见指令：
WcSelect
angular.module('app.administration').directive('wcSelect', ['$compile', function($compile)
{
return {
restrict: 'E',
replace: true,
scope: {
modules: '=',
fnctsNotAssigned: '=',
fnctModel : '='
},
templateUrl: 'app/_common/directives/wc-select.tpl.html',
link: function(scope, element, attrs)
{
scope.$watch('modules', function(newValue)
{
if (angular.isArray(newValue) &&
newValue.length > 0)
{
angular.element('.optGrpFunctions').remove();
var str = '<wc-select-option-group ng-repeat="module in modules" elt="module" select-id="parentId"></wc-select-option-group>';
$compile(str)(scope, function(cloned, scope) { element.append(cloned); });
}
});
scope.$watch('fnctModel', function(newValue)
{
if (newValue.fonction_parent_id !== null)
{
angular.element('.optGrpFunctions').remove();
scope.parentId = newValue.fonction_parent_id;
if (angular.isArray(scope.modules) &&
scope.modules.length > 0)
{
var str = '<wc-select-option-group ng-repeat="module in modules" elt="module" select-id="parentId"></wc-select-option-group>';
$compile(str)(scope, function(cloned, scope) { element.append(cloned); });
}
}
});
scope.parentId = null;
}
};
}]);
关联的模板：
<select
class="form-control"
name="parent"
ng-model="fnctModel.fonction_parent_id"
required>
<option
value="0"
ng-selected="fnctModel.fonction_parent_id === null">
Aucun
</option>
<optgroup
label="{{ $root.getWord('Functions not assigned') }}"
ng-if="fnctsNotAssigned.length > 0">
<option
ng-repeat="fnct in fnctsNotAssigned"
value="{{ fnct.fonction_id }}"
ng-selected="fnct.fonction_id === fnctModel.fonction_parent_id">
{{ fnct.fonction_name }}
</option>
</optgroup>
</select>
WcSelectOptionGroup
angular.module('app.administration').directive('wcSelectOptionGroup', ['$compile', function($compile)
{
return {
restrict: 'E',
replace: true,
scope: {
elt: '=',
selectId: '='
},
template: '<optgroup class="optGrpFunctions" label="{{ elt.module_name }}"></optgroup>',
link: function(scope, element, attrs)
{
/**
* ajoute les fonctions de elt a l'optGroup
*
* @author tibo
*/
scope.$watch('elt.fonctions', function(newValue)
{
if (angular.isArray(newValue) &&
newValue.length > 0)
{
var str = '<wc-select-option ng-repeat="fnct in elt.fonctions" item="fnct" select-id="selectId"></wc-select-option>';
$compile(str)(scope, function(cloned, scope) { element.append(cloned); });
}
});
}
};
}]);
和 WcSelectOption
angular.module('app.administration').directive('wcSelectOption', ['$compile', function($compile)
{
return {
restrict: 'E',
replace: true,
scope: {
item: '=',
selectId: '='
},
template: '<option value="{{ item.fonction_id }}" ng-selected="item.fonction_id === selectId">{{ item.fonction_title }}</option>',
link: function(scope, element, attrs)
{
/**
* ajoute les fonctions enfants de item a loptgroup
*
* @author tibo
*/
scope.$watch('item.children', function(newValue)
{
if (angular.isArray(newValue))
{
var str = '<wc-select-option ng-repeat="child in item.children" item="child" select-id="selectId"></wc-select-option>';
$compile(str)(scope, function(cloned, scope){ element.after(cloned); });
}
});
}
};
}]);
我认为我的错误是将指令直接放在指令的模板中，而不是使用$ compile来执行指令WcSelectOptionGroup。
再见：）