自定义指令中的 Angular UI 指令答案

【问题标题】：Angular UI directive inside custom directive自定义指令中的 Angular UI 指令
【发布时间】：2018-02-07 00:13:13
【问题描述】：

在下面的代码中，为什么 uib-datepicker-popup 没有变成 Angular 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>

【问题讨论】：

请检查我的更新答案。
@I.Ahmed 我现在正在尝试使用它，当我使用它时会更新
我只是在 1 分钟前更新它。您也可以检查，删除按钮。
@I.Ahmed 你的解决方案很好，但不幸的是我自己没有意识到我正在使用语义 UI，所以我不能使用它:( 我会通知链接的问题也回答
OK。提交问题后通知。我会检查的。

标签： javascript angularjs angularjs-directive angular-ui jquery-ui-datepicker

【解决方案1】：

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

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>

【讨论】：