![](/img/trans.png)
[英]AngularJS ng-view, ng-click and routerProvider not working together
[英]AngularJS cann't access ng-click from ng-view
我正在使用angularJS1.2路由功能部分加載一些視圖。
var app = angular.module('app', ['ngAnimate', 'ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/profile/personalInfo', {templateUrl: '<?php echo base_url().'profile/personalInfo' ?>', controller: personalInfo});
$routeProvider.when('/profile/myPlaces', {templateUrl: '<?php echo base_url().'profile/myPlaces' ?>', controller: myPlaces});
$routeProvider.otherwise({redirectTo: '/profile/personalInfo'});
$locationProvider.html5Mode(true);
}]);
function personalInfo($scope, $http){
console.log('personal info');
}
function myPlaces($scope, $http){
console.log('my places');
$scope.places = [];
//then fill places via $http.post request
$scope.loadMore = function(){
console.log('clicked');
}
}
這是我的部分頁面:
<div>
<h1>My Places Page</h1>
<div ng-repeat="place in places">
<a href="" ng-click="loadMore()">load more</a>
</div>
</div>
路由已成功完成,但是當我單擊鏈接以調用loadMore
,此錯誤出現在控制台中undefined is not a function
。 有什么問題,我該如何解決?
我找到了解決方案,但是我不確定這種解決方案是否最佳,但至少可以解決問題。 我創建了一個自定義指令,如下所示
app.directive('whenClicked', function() {
return function(scope, elm, attr) {
var raw = elm[0];
angular.element(raw).bind('click', function() {
console.log('clicked');
});
};
});
然后從部分頁面可以調用指令
<div>
<h1>My Places Page</h1>
<div ng-repeat="place in places">
<a href="" when-clicked>load more</a>
</div>
</div>
使其成為控制器:
app.controller('MyCtrl',function myPlaces($scope, $http){
console.log('my places');
$scope.places = [];
//then fill places via $http.post request
$scope.loadMore = function(){
console.log('clicked');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.