Question

我几乎使用UI-Router multiple named views not working的顶级解决方案和我的角度应用程序，但我的ui-view似乎没有更新，而是完全消失了。我必须有一些非常小的细节我已经被困住了很长时间......

我有一个index.html页面，其中[div ui-view =＆＃34;＆＃34;]在家庭状态下被替换。这个ui-view（frontpage.html）有另一个[div ui-view =＆＃34; search-result＆＃34;]我希望得到更新（将文本更改为＆＃34;成功替换模板＆＃34 ;）来自状态更改，但是当状态发生更改时，index.html中的整个[div ui-view =＆＃34;＆＃34;]会在单击搜索按钮时消失。

所有相关的脚本标记都包含在我的index.html中。

的index.html：

<body ng-app="...">
<div class="container">
    <div ui-view=""></div>
</div>

app.js：

angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('main', {
      url: "/",
      templateUrl: "/app/states/frontpage/frontpage.html"
    })
    .state('search', {
        url : "/search/:query",
        views: {
            'search-result@search': {
                template: 'successful template replacement'
            }
        }
    }).run(function(){});

frontpage.html：

<div class="row" ng-controller="MainController">
    some stuff here

    <div class="col-xs-9">
        <input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>

        <button class="btn btn-default inline" type="button" ng-click="search()">Search</button>

        <div ui-view="search-result"></div>
    </div>
</div>

mainCtrl.js

angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
    $scope.searchText;

$scope.search = function(){

    console.log('going to state search with searchText: ' + $scope.searchText);
    $state.go('search',{query:$scope.searchText});
}

}]);

Answer 1

如果 'search' 状态应该转到'main'的模板 ...它必须是它的孩子（检查{{ 1}}）

parent: 'main'

Angularjs ui-view没有更新

1 个答案: