我在 Angular js 中有一个场景。
我有一个主下拉列表,其中包含“子列表”和“子下拉列表”项。我已经使用指令加载了子列表和子下拉列表。
现在我的场景很简单,在从下拉列表中选择子列表时,我想加载“list-directive”,在从主下拉列表中选择子下拉列表时,我希望结果为“dropdown-”指令'
它应该是动态发生的。
我的 Seeddata.js:
var dirType = [
{ text: 'List', value: 0 },
{ text: 'Table', value: 1 },
{ text: 'Dropdown', value: 2 }
];
我的指令
var directiveModule = angular.module('directiveModule', ['serviceModule']);
directiveModule.directive('payerListDirective', function (payerService) {
return {
restrict :"AC",
template: "<ul><li ng-repeat='payer in dirType'>{{payer.text}}</li></ul>",
link: function ($scope) {
$scope.payersDir = payerService.getPayers();
}
};
});
directiveModule.directive('payerDropdownDirective', function (payerService)
{
return {
restrict: "AC",
template: "<select ng-model='x' ng-options='payer.value as payer.text for payer in dirType' ></select>",
link: function ($scope) {
$scope.payersDir = payerService.getPayers();
}
};
});
注意:payerService 是我从服务模块注入(inject)以加载数据的工厂
我的看法
<div ng-controller = "dircntrl" >
<select ng-model = "dirdummy">
<option ng-repeat = "dir in dirType" value = "{{dir.value}}" >{{dir.text}} </option>
</select>
<div parent-directive></div> // This is the place where I need solution
我的 Controller
cntrlModule.controller('dircntrl', function ($scope) {
$scope.dirType = dirType;
$scope.$watch('dirdummy',function(){
// Want the solution here
})
});
我试图在 Controller 中使用 $watch 来加载结果。但我不知道执行此操作的确切方法。
最佳答案
检查工作演示:JSFiddle .
你不需要$watch
。使用 ng-if
动态加载不同的指令。选择一个选项后,将加载相应的指令。
Note:
ng-if
will remove/create the DOM every time. So after you select a different option, the current DOM is removed and a totally new DOM element is inserted.
angular.module('Joy', [])
.controller('JoyCtrl', ['$scope', function ($scope) {
$scope.choice = '0';
}])
.directive('firstDirective', function () {
return {
restrict: 'A',
template: '<div>First directive</div>'
};
})
.directive('secondDirective', function () {
return {
restrict: 'A',
template: '<div>Second directive</div>'
};
});
HTML:
<div ng-app="Joy" ng-controller="JoyCtrl">
<select ng-model="choice">
<option value="0" name="0">Zero</option>
<option value="1" name="0">One</option>
</select>
<div>Selected: {{ choice }}</div>
<div ng-if="choice==='0'" first-directive></div>
<div ng-if="choice==='1'" second-directive>Second</div>
</div>
更新 1
如果你想实时编译指令(虽然不推荐),你可以使用 $compile
实现它的服务:JSFiddle .
关键是:使用ng-change
调用一个函数,编译相应的指令:
var $container = $('#result');
var directiveNames = [
'payer-list-directive',
'payer-dropdown-directive',
'payer-dropdown-directive'
];
$scope.changeMe = function () {
var $ele = $compile('<div ' + directiveNames[$scope.dirdummy] + '></div>')($scope);
$container.html($ele);
};
在 HTML 中:
<select ng-model="dirdummy" ng-change="changeMe()">
关于javascript - 如何动态加载和编译指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32205467/