AngularJSは - 異なるコントローラでルーティングは、空の$スコープにつながる

これは私の.jsがルーティングのためのファイルです：

var app = angular.module('WebApp', ['ngRoute']); 

/** 
* Configure the Routes 
*/ 
app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    // Home 
    .when("/", { templateUrl: "partials/kalendar.php", controller: "Ctrl" }) 
    .when("/logout", { templateUrl: "partials/logout.php", controller: "PageCtrl" }) 
    .otherwise({ 
    controller: function() { 
     window.location.replace('/'); 
    }, 
    template: "<div></div>" 
    }); 
}]); 

/** 
* Controls all other Pages 
*/ 
app.controller('PageCtrl', function ($scope) { 
     console.log("Page Controller reporting for duty."); 
}); 

/** 
* Controls calendar view 
*/ 
app.controller('Ctrl', function ($scope) { 
     console.log("Controller reporting for duty."); 
$scope.updateDuration = function() { 
     alert($scope.dateIn); 
} 
});

そして、これは私のkalendar.phpの一部です：

<div> 
<label>Datum:</label> 
<div class="input-group input-append date"> 
    <input type="text" class="span2 form-control" ng-model="dateIn"> 
    <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-th-large"></span> 
    </span> 
</div> 
</div>

I私のプログラムを実行すると、Page Controllerが呼び出されます（コンソールでは「Controller reporting for duty」と表示されます）。ただし、$ scope.dateInが定義されていないため、警告は機能しません。私の間違いを見つけるのを助けてください。

あなたは、あなたのHTML内の関数をupdateDuration呼び出す

出典

2017-04-01 snowy

あなたは 'updateDuration（）'を呼び出していませんが、警告文はどのように実行されますか？ – anoop

は??あなたがhtmmからあなたの関数を呼び出すことを確認してください

ここ

var app = angular.module('WebApp', ['ngRoute']); 
 

 

 

 
/** 
 
* Controls all other Pages 
 
*/ 
 
app.controller('PageCtrl', function ($scope) { 
 
     console.log("Page Controller reporting for duty."); 
 
}); 
 

 
/** 
 
* Controls calendar view 
 
*/ 
 
app.controller('Ctrl', function ($scope) { 
 
     console.log("Controller reporting for duty."); 
 
$scope.updateDuration = function() { 
 
     alert($scope.dateIn); 
 
} 
 
});

<!DOCTYPE html> 
 
<html ng-app="WebApp"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 
    <div> 
 
<label>Datum:</label> 
 
<div class="input-group input-append date"> 
 
    <input type="text" class="span2 form-control" ng-model="dateIn"> 
 
    <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-th-large"></span> 
 
    </span> 
 
    <button type="button" ng-click="updateDuration() ">check me</button> 
 
</div> 
 
</div> 
 
    </body> 
 

 
</html>

以下のように私は、ボタンのクリックで関数を呼び出すことができました。

出典

2017-04-01 09:04:14

ありがとうございます。 afterDoneのclockpickerから関数を呼び出しています。上記の例では、datepickerも使用しています。手動で日付を入力すると、データ（「12.09.2017」など）が正しく通知されます。しかし、私がピッカーでそれを選んだ場合、それは未定義です。何が問題なのか考えていますか？ – snowy

両方のピッカーが同じコントローラにありますか？あなたがdatepickerを使って日付アラートを得ることができるようなあなたの言い回しですが、もしあなたがアラートを受け取っていない時計ピッカーのウルを使用していれば.....これは実際の問題です。呼び出しは正しい方法で行われ、そのコントローラーで使用可能な関数 –

これらはすべて同じコントローラー内にあります。問題は、ピッカー（datepickerと2つのclockpickers）はすべて入力フィールドを持っていて、それらをクリックすると、日付/時刻を選択するためのポップアップが表示されます。私はちょうど日付を入力すると、ポップアップを使用せずにすべて正常に動作します。しかし、私がpopups $ scope.dateIn（例えば）を使用する場合、常に未定義です。これはピッカーの問題ですか、何かを監督していますか？私はかなりの間、この全体の問題に立ち往生しているので、多くの質問には申し訳ありません！ – snowy

AngularJSは - 異なるコントローラでルーティングは、空の$スコープにつながる

答えて

関連する問題