2015-09-05 61 views
0

是否配置$routeProvider對某些URL模式Ajax響應,與控制器映射也開始加入div元素:

<!-- class="hidden" to keep element hidden till AngularJs is not ready --> 
<div ng-controller="IModalCtrl" class="hidden" ng-show="is_visible" ng-view> 
    <!-- AJAX RESPONSE VIEWER --> 
</div> 

在成功請求,響應內容被附加到目標<div>元素,但元素由於ng-show而不可見,所以它的模型值不變。

我不知道在哪裏更改$scope.is_visible的值。

下面的工作:

var app = angular.module('home', ['ngRoute']); 
app.config(['$routeProvider', '$locationProvider', '$httpProvider', 
    function ($routeProvider, $locationProvider, $httpProvider) { 
    $locationProvider.html5Mode(true); 
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 
    $routeProvider.when('/news/:cat/:slug/:id', { 
     templateUrl: function (attr) { 
      console.log(attr); 
      return '/news/' + attr.cat + '/' + attr.slug + '/' + attr.id + '?ajax=1' 
     }, 
     controller: 'IModalCtrl' 
    }).otherwise('/'); 
}]); 

app.controller('IModalCtrl', function($scope, $http, $route, $routeParams, $location) { 
    // Keep element hidden default 
    $scope.is_visible = false; 
}); 

回答

0

基本上你已經創建IModalCtrl控制器的兩個實例,作爲其中之一是ng-view股利和另外一個是在路由定義加載。我不這麼認爲你需要從路由定義中加載的控制器。

要解決您的問題,您不需要使用ng-show,您需要$scope.is_visible = true;控制器在從ajax獲得成功後需要$scope.is_visible = true;

更新

在這種情況下,你可能需要使用的承諾,它會告訴控制器時加載的決心功能被完成了自己的諾言。

$routeProvider.when('/news/:cat/:slug/:id', { 
    templateUrl: function (attr) { 
     console.log(attr); 
     return '/news/' + attr.cat + '/' + attr.slug + '/' + attr.id + '?ajax=1' 
    }, 
    controller: 'IModalCtrl', 
    resolve: { 
     getData: function($http){ 
      //this will get called before controller get loaded 
      //and the include this promise inside the controller. 
      return $http.get('url'); 
     } 
    } 

}) 
+0

兩個實例!!!我已經按照這個文檔[https://docs.angularjs.org/api/ngRoute/service/$route](https://docs.angularjs.org/api/ngRoute/service/$route)。 這是我的問題是我在哪裏把這個代碼'$ scope.is_visible = true;'? – vinaykrsharma

+0

@vinaykrsharma你想通過聲明'is_visible'標誌來實現什麼? –

+0

我想讓div元素在Ajax響應附加後可見! – vinaykrsharma

相關問題