gpt4 book ai didi

javascript - 自定义指令中的 Angular UI 指令

转载 作者:行者123 更新时间:2023-11-30 20:46:20 25 4
gpt4 key购买 nike

Similar question but the question isn't sufficiently answered

在下面的代码中,为什么 uib-datepicker-popup 没有变成一个 Angular UI 日期选择器?

我是否缺少指令的一些标志/编译选项?

这是 datepicker-popup 的精简示例Angular-UI 文档中的示例,已修改为位于指令内。请注意它在与 Controller 一起使用时如何工作,但在我使用指令的示例中不起作用

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>

最佳答案

是的,可以在指令中使用指令。我修改了你的代码。它的工作原理,请检查。

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>

关于javascript - 自定义指令中的 Angular UI 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48654008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com