我长期以来一直面对这个问题,当我尝试使用{{}}
将数据绑定到html中的变量时,我会抛出它。我使用ngRoute
在不同页面之间进行路由。当我尝试将数据绑定到变量或HTML中的ng-model
时,会出现上述错误。
但是当模型的值已经在控制器中声明时,它可以正常工作。
我收到的数据来自自定义服务,最终在从控制器调用时发出http GET请求。
<html ng-app="bgpsApp">
<body>
<div ng-view></div>
</body>
<!-- scripts loaded in a sequence:
jquery, angular.js(1.6.9), angular-route.js, app.js, customservices.js -->
</html>
var bgpsapp = angular.module('bgpsApp', ['ngRoute']);
bgpsapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'brahmagpslogin.html'
})
.when('/portal', {
resolve: {
"check": function($location, $rootScope) {
if (!$rootScope.logStatus) {
$location.path('/');
}
}
},
templateUrl: 'portal.html'
})
.otherwise({
redirectTo: '/'
})
})
bgpsapp.controller('MainController', ['$scope', '$rootScope', '$http', 'services', function($scope, $rootScope, $http, services) {
services.getDashboardData($rootScope.master.userId).then(function(response) {
$scope.vehiclesStatus = response.data.data.vehiclesStatus;
console.log($scope.vehiclesStatus);
// ** assigning value to bind **
$scope.vehicleCount = $scope.vehiclesStatus.vehicleCount;
}, function(response) {
alert(response.data.message);
});
}]);
<div id="wrapper" ng-controller="MainController">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<h4>Vehicles
<small> Status</small>
</h4>
</div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
<h4>
<!-- trying to bind data to this variable -->
{{vehicleCount}}
<small>Trucks</small>
</h4>
</div>
</div>
</div>
bgpsapp.service('services', function($http) {
this.baseURL = "http://xxx/api/data";
this.getDashboardData = function(customerId) {
var d_response = {};
var response = $http.get(this.baseURL + "/customer/data/dashboard?userId=" + customerId);
return response;
}
});