我正在嘗試在我的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