如何在IE 7和8中获取angularjs路由以显示部分内容?

时间:2012-10-09 12:30:14

标签: url-routing angularjs

我在项目中使用AngularJS,并尝试使用包含的路由进行导航。 我在IE7和8中遇到问题。当我转到其中一个页面时,控制器会触发并加载数据。 (我可以看到部分返回时填充了所有数据绑定字段。)问题是部分没有被添加/附加到ng-view。我开始使用AngularJS v1.0.1,但现在切换到1.0.2,认为这可能是我使用的版本中的一个错误。任何帮助将不胜感激。

这是我用于路由的代码:

myApp.config(['$routeProvider', function($routeProvider, $location){
$routeProvider.when('/business/:query', {   templateUrl: 'partials/detail.html', controller: 'details'});
$routeProvider.when('', { templateUrl: 'partials/splash.html'});
$routeProvider.when('/results/:query', {    templateUrl: 'partials/list.html', controller: 'listController'});
$routeProvider.otherwise({redirectTo: ''});

}]);

这是控制器的代码:

myApp.controller('listController', listController = function($scope, $routeParams, $http, $cookies){

var query = $routeParams.query;
var myQuery =  query.indexOf('-') > 0 ? $scope.removeDashes(query):query;

switch($scope.selected)
{
case 'name':
    $http({ method: 'jsonp',
       //URL to test service
        url: 'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchBusinesses?NAME=' + myQuery + '&callback=JSON_CALLBACK',
        header: { 'Content-Type': 'application/json; charset=utf-8' }

    })
    .success(function(data){
        $scope.businesses = data;
    });
    break;

case 'address':
    $http({method:'jsonp',
    //URL to test service
    url:'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchAddress?myAddress=' + myQuery + '&callback=JSON_CALLBACK',
    header:{'Content-Type':'application/json; charset=utf-8'}
    })
    .success(function(data){
        $scope.businesses = data;

    })
    .error(function(data){

        return false;
    })
    break;
}
})


myApp.controller('details', details  = function($scope, $http, $routeParams){

var query = $routeParams.query;
var myQuery =  query.indexOf('-') > 0 ? $scope.removeDashes(query):query;

$http({ method: 'jsonp',
    //URL to test service
    url: 'http://localhost:56119/PropertyAppraiser/PABusinessSearchService.asmx/searchBusinesses?FOLIO=' + myQuery + '&callback=JSON_CALLBACK',
    header: { 'Content-Type': 'application/json; charset=utf-8' }

})
.success(function(data){
    $scope.businesses = data;           
});
});

这是该应用的HTML:

<div id="ng-app" class="ng-app:myApp ng-cloak" ng-cloak ng-app="myApp"  ng-controller="businessSearchCtrl">

<div id="infoContainer" >
<h1 id="mainHeader">Personal Property Account Information</h1>

<div id="searchContainer">
<h3 style="background: none; margin: 0; padding: 0">Search By Folio, Business Name, or Address:</h3>

<select ng-model="chosen" ng-options="i.id as i.name for i in items">
    <option value=""></option>
</select>

<input id="searchBox" type="text" placeholder="Enter Business Name or Folio Number" ng-model="query" />
<input id="submit" type="button" ng:click="search()" value="Search"/>
</div>


<div class="ng-view">

</div>

</div>
<div style="clear:both; height:0">&nbsp;</div>
</div>

<div style="clear:both; height:0">&nbsp;</div>
</div>

编辑: 它适用于我在包括IE9测试过的所有其他浏览器中,我也没有收到任何错误消息。

1 个答案:

答案 0 :(得分:2)

好的,我发布了这个答案,以防任何其他睡眠不足的父亲出现同样类型的错误。正在包含的部分的html需要具有某种类型的包含元素。显然,IE 7和8不能将html附加到页面,除非它完全包含在块级元素中。

也许我已经知道这一点而且忘了。如果你现在正在读这篇文章,也许你就知道了。也许这就是为什么人们不会将他们的真实姓名用于Q&amp; A网站的原因。我所知道的是,前端发展可能是一个残忍,苛刻的情妇......