Question

我是Angular的新手，我想用Angular重新编写/改进我的ASP.NET应用程序，以成为更好的程序员。我通过创建一个顶部横幅开始小，用户可以从弹出日历（Pikaday.js）中选择startDate和endDate（将发送到Web服务）。问题是我似乎无法在我的指令模板中调用此函数：

网络表单：

<!DOCTYPE html>
<html>
<head>
<title></title>
  <script src="scripts/angular.min.js"></script>
  <script src="scripts/myAngularApp.js"></script>
  <link href="css/myStyleSheet.css" rel="stylesheet" />
  <link href="css/bootstrap.css" rel="stylesheet" />
  <script src="scripts/myFunctions.js"></script>

</head>

<body data-ng-app="myApp">
    <top-banner></top-banner>
</body>
</html>

myAngularApp.js

/// <reference path="angular.min.js" 
/// <reference path="bootstrap.min.js" />
/// <reference path="Pikaday/pikaday.js" />
/// <reference path="myFunctions.js" />

var myApp = angular.module('myApp', []);
myApp.directive('topBanner', function () {
    var template = "<div class='row'>\
                     &ensp;Report from:&emsp;\
                     <input type='text' id='startDate' size='6'/>&emsp;To\
                     &emsp;<input type='text' id='endDate' size='6'/>&emsp;\
                     <input type='button' value='Go'>\
                    </div>";
    return {
        template,
        restrict: 'E'
    };
});

pikaday功能：

function loadPikaday() {
    var picker = new Pikaday({
        field: document.getElementById("startDate"),
        firstDay: 1,
        format: "YYYY-MM-DD",
        minDate: new Date('2000-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000, 2020],
        numberOfMonths: 2
    });

    var picker = new Pikaday({
        field: document.getElementById("endDate"),
        firstDay: 1,
        format: "YYYY-MM-DD",
        minDate: new Date('2000-01-01'),
        maxDate: new Date('2020-12-31'),
        yearRange: [2000, 2020],
        numberOfMonths: 2
    });
}

我希望我的函数能够在我的指令中处理模板变量的元素。我得到以下页面，这正是我想要的，但是当我点击文本字段时没有弹出Pikaday日历。我非常感谢社区的反馈。谢谢！

Answer 1

你的指令是这样的它现在可以使用

＆＃13;

var myApp = angular.module('myApp', []);
myApp.directive('topBanner', function () {
    var template = "<div class='row'>\
                     &ensp;Report from:&emsp;\
                     <input type='text' id='startDate' size='6'/>&emsp;To\
                     &emsp;<input type='text' id='endDate' size='6'/>&emsp;\
                     <input type='button' value='Go'>\
                    </div>";
    return {
        template,
        restrict: 'E',
        controller: function loadPikaday() {
      var picker = new Pikaday({
         field: document.getElementById("startDate"),
         firstDay: 1,
         format: "YYYY-MM-DD",
         minDate: new Date('2000-01-01'),
         maxDate: new Date('2020-12-31'),
         yearRange: [2000, 2020],
         numberOfMonths: 2
       });

      var picker = new Pikaday({
          field: document.getElementById("endDate"),
          firstDay: 1,
          format: "YYYY-MM-DD",
          minDate: new Date('2000-01-01'),
          maxDate: new Date('2020-12-31'),
          yearRange: [2000, 2020],
          numberOfMonths: 2
      });
    }
    };
});

＆＃13;

Answer 2

所以你可能需要创建一个控制器，理想情况下是服务。

如果您不知道这些是什么，请查看article - 请给您一个很好的介绍AngularJS。

好的，现在你想要实际创建一个新控制器并将其附加到你的app模块。您实际上可以继续并在控制器中输入pikaday函数，并通过在您的指令中添加另一个参数在限制下将指令链接到您的控制器来调用它：

   return {
       template: template,
       restrict: 'E',
       controller: 'controller',
       controllerAs: 'ctrl'
   }

完成后，您可以继续将pikaday函数附加到控制器，并通过在元素中添加此标记在您的指令中访问它：

  "ng-click='loadPikaday()'"

如果这对你来说真的让人感到困惑，我建议给我上面标记的那篇文章一个很好的阅读和你应该清理的东西。那篇文章真正概述了AngularJS应用程序的构建以及不同组件如何协同工作。

希望这有帮助！

编辑：在旁注中，操作控制器中的DOM通常是不好的做法，因此你应该将pikaday函数转换为服务，但为了快速修复，这应该可行。

我试图在我的Angular指令中调用一个函数

2 个答案: