[英]Angular UI directive inside custom directive
在下面的代码中，为什么uib-datepicker-popup没有变成一个有角度的 UI 日期选择器？
我是否缺少该指令的某些标志/编译选项？
这是 Angular-UI 文档中datepicker-popup示例的精简示例，已修改为包含在指令中。 请注意与控制器一起使用时它是如何工作的，但在我的带有指令的示例中不起作用。
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>
从自定义指令内部调用angular UI Bootstrap指令
[英]Call angular UI Bootstrap directive from inside custom directive
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.