我正在使用symfony和AngularJs 1.6.8以及Symfony 3.4。我有下一个配置:
base.html.twig
<html lang="en" data-ng-app="CeocApp" ng-controller="CeocController">
//css for the app
<link id="ng_load_plugins_before"/>
//more ccs for the app
<body>
....
<div class="row" ui-view></div>
....
<script src="{{ asset('assets/angular/angular/angular.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/angular/angular-sanitize/angular-sanitize.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/angular/angular-touch/angular-touch.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/angular/angular-ui-router/release/angular-ui-router.min.js') }}"
type="text/javascript"></script>
<script src="{{ asset('assets/angular/oclazyload/dist/ocLazyLoad.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/angular/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js') }}"
type="text/javascript"></script>
<script src="{{ asset('assets/ceoc/angular_app/ceoc-angular-app.js') }}"></script>
</body>
</html>
ceoc-app.js
var CeocApp = angular.module('CeocApp', [
'ui.router',
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize"
]).config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}]);
CeocApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "../templates/dashboard.html",
controller: "DashboardController as dashboard",
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'CeocApp',
insertBefore: '#ng_load_plugins_before',
files: [
'../assets/ceoc/angular_app/controllers/dashboard-controller.js'
]
});
}]
}
})
}]);
dashboard-controller.js是一个有效的控制器,但存在问题:
问题1: $ http.get(Rountin.generate(&#39; route_name&#39;))无效。
当我运行应用程序时,控制器已加载,并且在$ http.get()请求之前的所有操作都有效,但之后的代码并不是(&#t;)
angular.module('CeocApp').controller('DashboardController', ['$scope', '$rootScope', function ($scope, $rootScope, $http) {
$rootScope.pageTitle = 'Dashboard';
$scope.total = 2500;
alert('this line will be reached');
$http.get(Routing.generate('ceoc.dashboard')).then(function (data) {
$scope.total = 10000
}, function (data) {
});
alert('this line will never be reached');
}]);
问题2: $ .get不允许我更改$ scope值。
当我为$ .get()更改$ http.get()时,它可以工作并发出ajax请求,但不会修改$ scope.total值。
angular.module('CeocApp').controller('DashboardController', ['$scope', '$rootScope', function ($scope, $rootScope, $http) {
$rootScope.pageTitle = 'Dashboard';
$scope.total = 2500;
$.get(Routing.generate('ceoc.dashboard')).success(function (data) {
alert('request successfull');
$scope.total = 200; //this value won't be setted
}).then(function () {
$scope.total = 6000;
});
$scope.total = '879';//this value will be setted
}]);
服务器响应
{"retrasadas":5,"total":10,"en_tiempo":5}
我的问题是如何在成功的ajax请求后正确设置$ scope.anyvar值? (使用$或$ http) 我错过了什么吗?
提前致谢
答案 0 :(得分:1)
使用Coec
的handleAjax函数及其回调参数:
Ceoc.handleAjax(Routing.generate('ceoc.dashboard'), "GET", function (data) {
$scope.total = data.total;
$scope.$apply();
});