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 - 用不同的控制器路由导致空$范围

回答

相关问题