Question

这是演示： http://www.tanadsplinare.com.hr/tmp/ngtest/ngVer/ （在搜索字段中输入1,2或3，然后单击任何项目。）

现在项目详细信息显示在右侧的itemDetail div中。但是，ui-view被放置在子部分视图中，在列表下的左侧面板中，它是itemsListDetailOutput div。我不知道其他方式，所以我快速将ui-view的innerHTML复制到itemDetail（我想要显示项目详细信息，但我不能将ui-view应用于它，因为已经存在其他ui-查看那里，项目列表使用它）并清除ui-view的innerHTML。我想我应该在摘要事件上做，但我不知道该怎么做，所以我只使用了setTimeout：

$('#itemDetail').hide();
setTimeout(function() {
  $("#itemDetail").html($("#itemsListDetailOutput").html()).fadeIn(200);
}, 10);

基本上是这样的：

1）还有其他方法，正确的方式，而不是将内部HTML移动到所需的HTML元素;如果没有：

2）我怎样才能捕获摘要事件而不是使用setTimeout？

谢谢

修改

我已将它发布到plunker：http://plnkr.co/edit/EC4FBr9RtTvaycBteLJ3，不知道为什么它在那里不起作用，但代码就在那里。我也会在这里发布：

的index.html：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/app.css"/>  

  <script src="lib/jquery-2.0.1.min.js" type="text/javascript"></script>
  <script src="lib/angular/angular.js" type="text/javascript"></script>
  <script src="lib/angular/angular-ui-router.min.js" type="text/javascript"></script>  
  <script src="js/app.js" type="text/javascript"></script>
  <script src="js/services.js" type="text/javascript"></script>
  <script src="js/controllers.js" type="text/javascript"></script>  

</head>
<body>
  <nav id="menu">
    <a href="index.html" class="selected">Angular way</a>
    <a href="../jsVer/index.html">JS way</a>
  </nav>

  <section>  
    <div id="contentWrapper">
        <nav class="itemsListHolder" ng-controller="ItemsListHolderController">
            <input ng-model="search" ng-change="searchUpdated(search)" type="search" id="search" placeholder="Search..." />            
            <div ui-view id="itemsList"></div>
            enter 1, 2 or 3
        </nav>

        <div id="itemDetail" class="panel">Select the film from the list...</div>
    </div>    
  </section>

  <div id="preloader"></div>

</body>
</html>

/partials/ngItemsList.html：

<section ng-repeat="item in items">
<div class="itemsListItem" data-index="{{item.id}}" ng-click="displayDetail(item.id)">
    <div class="dataTitleOriginal">{{item.titleOriginal}}</div>
    <div class="dataTitleLocal">{{item.titleLocal}}</div>
    <div class="dataYear">{{item.year}}</div>
</div>
</section>
<div ui-view id="itemsListDetailOutput"></div>

/partials/ngItemDetail.html：

<div class="itemDetailName">Original Title</div>
<div class="itemDetailValue titleOriginal">{{titleOriginal}}</div>

<div class="itemDetailName">Local Title</div>
<div class="itemDetailValue titleLocal">{{titleLocal}}</div>

<div class="itemDetailName">Year</div>
<div class="itemDetailValue year">{{year}}</div>

/js/app.js：

'use strict';

angular.module('myApp', [
  'myApp.controllers',
  'ui.router'
])

.config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('itemsList', {
            url: '/list/:query',
            templateUrl: 'partials/ngItemsList.html',
            controller: 'ItemListController'
        })
        .state('itemsList.itemDetail', {
            url: '/detail/:id',
            templateUrl: 'partials/ngItemDetail.html',
            controller: 'ItemDetailController'
        })
    ;
    //$locationProvider.html5Mode(true);
} ])
.run(['$rootScope', '$state', 'Main', 'Items', function($rootScope, $state, Main, Items) {
    Main.init();
    Items.initDatabase();
    $rootScope.$on('$stateChangeStart', function() {
        document.getElementById("preloader").style.display = "block";
        setTimeout(function() {
            document.getElementById("preloader").style.display = "none";
        }, 5000);
    });
    $rootScope.$on('$stateChangeSuccess', function() {
        document.getElementById("preloader").style.display = "none";
    });
} ])
;

/js/services.js：

'use strict';

angular.module('myApp')
.factory('Main', function() {
    return {
        testdata: null,
        init: function() {
        }
    }
})

.factory('Items', function(Main) {
    var insertItem = function(permalink, titleOriginal, titleLocal, year) {
        var items = getItemsList();
        items.push({
            permalink: permalink,
            titleOriginal: titleOriginal,
            titleLocal: titleLocal,
            year: year
        });
        Main.testdata = items;
    };
    var initDatabase = function() {
        // Fill Database.
        if (!Main.testdata) {
            insertItem("1111-film", "1111 orig", "1111", "1980");
            insertItem("3333-film", "3333 orig", "3333", "1982");
        }
    };
    var getItemsList = function() {
        return (Main.testdata) ? Main.testdata : [];
    };
    var getItem = function(index) {
        var list = getItemsList();
        if (list && list.length && list.length > index) {
            return list[index];
        }
    };
    return {
        initDatabase: initDatabase,
        insertItem: insertItem,
        getItemsList: getItemsList,
        getItem: getItem
    }
})
;

/js/controllers.js：

'use strict';

angular.module('myApp.controllers', [])
.controller('ItemsListHolderController', ['$scope', '$state', function($scope, $state) {
    $scope.searchUpdated = function(query) {
        $state.go('itemsList', {
            query: query
        });
    };
} ])
.controller('ItemListController', ['$scope', '$state', '$stateParams', 'Items', function($scope, $state, $stateParams, Items) {
    var query = $stateParams.query;
    var result = Items.getItemsList();
    var filteredResult = [];
    for (var i = 0; i < result.length; i++) {
        if (result[i].titleOriginal.indexOf(query) > -1 || result[i].titleLocal.indexOf(query) > -1 || result[i].year.indexOf(query) > -1) {
            result[i].id = i;
            filteredResult.push(result[i]);
        }
    }
    $scope.items = filteredResult;
    $scope.displayDetail = function(index) {
        $state.go('itemsList.itemDetail', {
            id: index
        });
    };
} ])
.controller('ItemDetailController', ['$scope', '$stateParams', 'Items', function($scope, $stateParams, Items) {
    var itemId = $stateParams.id;
    var item = Items.getItem(itemId);
    $scope.titleOriginal = item.titleOriginal;
    $scope.titleLocal = item.titleLocal;
    $scope.year = item.year;
    //xxxx UGLY FIX: display in ui-view, (it's set to display none anyway) and copy its innerHTML to another DOM element; also wait a while till digests
    $('#itemDetail').hide();
    setTimeout(function() {
        $("#itemDetail").html($("#itemsListDetailOutput").html()).fadeIn(200);
    }, 10);
} ])
;

Answer 1

<强>更新

详细信息Nested View Example请检查以了解ui.router中的嵌套视图...

<强> ANSWER

ui.router支持在这种情况下可以使用的嵌套视图。

当您将详细信息页面设置为列表的子状态时，您可以在列表html 中添加ui-view并告知详细信息状态以将其自身包含在其中ui-view

嵌套视图的

语法与正常状态定义略有不同。您应该在视图属性中定义它们，而不是直接定义 templateUrl 和控制器。

所以首先用这个改变你的状态定义

views: {
    uiViewName@stateName: {
        templateUrl: '...',
        controller: '...'
    }
}

所以从你的定义中移除templateUrl和controller并将它们放入views属性中你应该设置你的stateName以及你的示例中的 itemsList ......

现在你应该在列表html中添加一个名为uiViewName的ui-view（你可以随意更改它）

...
<div ui-view="uiViewName"></div>
...

因此，无论何时进入详细信息页面，都会注入特定的ui-view ...

角度ui-view位置

1 个答案: