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

【问题标题】：I am trying to call a function within my Angular directive我试图在我的 Angular 指令中调用一个函数
【发布时间】：2016-08-10 20:23:19
【问题描述】：

我是 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 日历。我将非常感谢社区的反馈。谢谢！

【问题讨论】：

标签： javascript asp.net angularjs angularjs-directive

【解决方案1】：

所以您可能必须创建一个控制器，最好是一个服务。

如果您不知道这些是什么，请查看此article out- 应该可以很好地介绍 AngularJS。

好的，现在您需要实际创建一个新控制器并将其附加到您的应用模块。您实际上可以继续并在控制器中折腾 pikaday 函数，并通过将指令链接到控制器来调用它，方法是在您的指令中添加另一个参数来限制为：

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

一旦你有了它，你就可以继续将 pikaday 函数附加到你的控制器上，并通过在你的元素中添加这个标签在你的指令中访问它：

  "ng-click='loadPikaday()'"

如果这让您感到非常困惑，我建议您好好阅读我在上面标记的那篇文章，并且您应该澄清一下。那篇文章真正概述了 AngularJS 应用程序的构建以及不同组件如何协同工作。

希望这有帮助！

编辑：顺便说一句，在控制器中操作 DOM 通常是不好的做法，因此您应该将 pikaday 函数放入服务中，但为了快速修复，这应该可以工作。

【讨论】：

【解决方案2】：

你的指令有这样的它现在可以工作

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
      });
    }
    };
});

【讨论】：