Angular UI directive inside custom directive

Question

Similar question but the question isn't sufficiently answered

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?

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>

@I.Ahmed I'm attempting to use it now, will update when I get it working — Isaac, CommentedFeb 7, 2018 at 1:37
I just update it 1 min before. you can check also, removed the button. — I. Ahmed, CommentedFeb 7, 2018 at 1:41
@I.Ahmed your solution is good, but unfortunately for myself I didn't realise I was using semantic-ui so I can't use it :( I'll notify the linked question about this answer too — Isaac, CommentedFeb 7, 2018 at 2:14

I. Ahmed · Accepted Answer · 2018-02-07 01:39:58Z

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>

Collectives™ on Stack Overflow

Angular UI directive inside custom directive

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related