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

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

您的指令具有这样的功能，它将立即生效

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

Answer 2

因此，您可能必须创建一个控制器，理想情况下是创建一个服务。

如果您不知道这些是什么，请查阅本文-应该为您提供有关AngularJS的很好的介绍。

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

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

一旦有了适当的位置，就可以继续将pikaday函数附加到控制器上，并通过在元素中添加以下标记在指令中对其进行访问：

  "ng-click='loadPikaday()'"

如果这确实让您感到困惑，我建议您给我上面标记的文章做个很好的阅读，然后您应将其清除一些。 该文章确实概述了AngularJS应用的构建以及不同组件如何协同工作。

希望这对您有所帮助！

编辑：顺便说一句，在控制器中操作DOM通常是错误的做法，因此您应该将pikaday函数集成到服务中，但是为了快速修复，这应该可行。

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

问题描述

2 个解决方案

解决方案1
0 2016-08-10 20:38:26

解决方案2
0 已采纳 2016-08-10 20:42:40

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

问题描述

2 个解决方案

解决方案1 0 2016-08-10 20:38:26

解决方案2 0 已采纳 2016-08-10 20:42:40

解决方案1
0 2016-08-10 20:38:26

解决方案2
0 已采纳 2016-08-10 20:42:40