Angularディレクティブ内で関数を呼び出そうとしています

私はAngularを初めて使っています。より良いプログラマになるためにAngularを使用してASP.NETアプリケーションを書き直したいと思います。私は、ユーザーがポップアップカレンダー（Pikaday.js）からstartDateとendDate（Webサービスに送信される）を選ぶことができるトップバナーを作成することで、小さなものから始めています。問題は、私は私の指示のテンプレート内にこの関数を呼び出すことができるように見えることができないということです。Angularディレクティブ内で関数を呼び出そうとしています

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

私の関数は、直接のテンプレート変数の要素を処理したいive。次のページが表示されます。これは、テキストフィールドをクリックするとPikadayのカレンダーが表示されず、欲しいものです。私はコミュニティの感謝を大いに感謝します。ありがとうございました！

出典

2016-08-10 Johnathan

だからあなたはおそらくコントローラを作成する必要があるとして、理想的にしている動作します。このように持っているあなたの指令サービス。

これらが何であるかわからない場合は、articleをチェックして、AngularJSの優れた紹介を得てください。

これで、実際に新しいコントローラを作成し、それをアプリケーションモジュールに接続したいと思うでしょう。あなたの場所にいることができたら

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

：あなたは実際に先に行くと、コントローラでpikaday機能にトス、およびように制限の下であなたのディレクティブで別のパラメータを追加して、コントローラにあなたのディレクティブをリンクすることで、それを呼び出すことができますあなたは先に行くと、お使いのコントローラにpikaday機能を添付し、あなたの要素にこのタグを追加することで、あなたのディレクティブでそれにアクセスすることができます。

"ng-click='loadPikaday()'"

これはあなたに本当に混乱と思われる場合は、私は私がタグ付けされたその記事を与えることをお勧めしたいです良い読書の上に、あなたは少しクリアするべきもの。この記事では、AngularJSアプリケーションのビルドと、さまざまなコンポーネントがどのように連携しているかを概説しています。

これが役に立った！

EDIT：コントローラーでDOMを操作するのは悪い習慣であるため、pikaday関数をサービスに含める必要がありますが、すばやく修正するにはこれが有効です。

出典

2016-08-10 20:42:40 Ted

ありがとうございます！私はそれらを調べます！ :) – Johnathan

それは今

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

出典

2016-08-10 20:38:26

Angularディレクティブ内で関数を呼び出そうとしています

答えて

関連する問題