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>

當我運行我的程序，頁面控制器被調用（「Controller reporting for duty。」show in console），但是警告不起作用，因爲$ scope.dateIn是未定義的。請幫我找到我的錯誤。

來源

2017-04-01 snowy

你沒有調用'updateDuration（）'，alert語句將如何執行？ – anoop

凡在你的HTML您的電話updateDuration功能??請確保您的通話從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調用函數。在上面的例子中，我也使用了日期選擇器。如果我手動鍵入日期，則會正確提示數據（例如：「12.09.2017」）。但是如果我選擇它，它仍然是未定義的。你有一個想法可能是什麼問題？ – snowy

是那些都採摘是在同一個控制器??你說的如果你使用datepicker我們可以得到日期警報，但如果你使用clockpicker我沒有得到警報.....如果這是實際問題，請確保功能調用方式正確，並且該控制器可用的功能 – 2017-04-01 10:20:17

它們全部位於同一控制器中。問題是：選取器（datepicker和兩個clockpickers）都有輸入字段，如果你點擊它們，它們會彈出一個選擇日期/時間的彈出窗口。如果我只輸入日期，不使用彈出窗口，一切正常。但是，如果我使用彈出窗口$ scope.dateIn（例如）始終未定義。這是採購員的問題，還是我在監督某件事情？我在這個問題上停留了很長時間，所以很抱歉有很多問題！ – snowy

AngularJS - 用不同的控制器路由導致空$範圍

回答

相關問題