自定义指令中的 Angular UI 指令 [英] Angular UI directive inside custom directive
问题描述
在下面的代码中，为什么 uib-datepicker-popup 没有变成一个有角度的 UI 日期选择器?
In the following code, why doesn't uib-datepicker-popup turn into an angular UI date picker?
我是否缺少指令的某些标志/编译选项?
Am I missing some flag/compile option for the directive?
这是 datepicker-popup 示例的精简示例在 Angular-UI 文档中，修改为包含在指令中.请注意它在与控制器一起使用时如何工作，但在我的带有指令的示例中不起作用.
This is a stripped down example of the datepicker-popup example in the Angular-UI documentation, modified to be inside a directive. Notice how it works when used with the controller but doesn't work in my example with the directive.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('timeScale',()=>({
template: `
<h1>Scope:</h1>
<ul>
<li>format: {{format}}</li>
<li>dt: {{dt}}</li>
<li>popup: {{popup}}</li>
<li>dateOptions: {{dateOptions}}</li>
</ul>
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"/>
`,
link: $scope => {
$scope.format = 'dd-MMMM-yyyy'
$scope.dt = null;
$scope.popup = {
openend: false
};
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
}
}
}));<body ng-app="ui.bootstrap.demo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<time-scale></time-scale>
</body>推荐答案
是的，可以在指令中使用指令.我已经修改了你的代码.它的工作原理，请检查.
Yes, its possible to use the directive inside a directive. I have modified your code. And its working, please check.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('timeScale',()=>({
template: `
<h1>Scope:</h1>
<ul>
<li>format: {{format}}</li>
<li>dt: {{dt}}</li>
<li>popup: {{popup}}</li>
<li>dateOptions: {{dateOptions}}</li>
</ul>
<input uib-datepicker-popup="{{format}}" type="text"
class="form-control"
ng-model="dt"
is-open="popup.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close" ng-click="open()" />
`,
link: $scope => {
$scope.format = 'dd-MMMM-yyyy'
$scope.dt = null;
$scope.popup = {
openend: false
};
$scope.open = function() {
$scope.popup.opened = true;
}
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
}
}
}));<body ng-app="ui.bootstrap.demo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<time-scale></time-scale>
</body>这篇关于自定义指令中的 Angular UI 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
