ionic-cyf-directives 文档
cyf-nav-view
前言
ionic 中的 ion-nav-view 不可动态地绑定 name 属性，如果用 cyf-nav-view 替代 ion-nav-view，则可解决此问题，并且 ion-nav-view 的所有属性都可用于 cyf-nav-view。
示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body ng-app="myApp" ng-controller="myController">
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>cyf-nav-view</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
<script src="js/ionic-cyf-directives.min.js"></script>
</head><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>cyf-nav-view</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
<script src="js/ionic-cyf-directives.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<div class="row">
<script id="tpl0" type="text/ng-template">
<script id="tpl1" type="text/ng-template">
<script type="text/javascript">
app.config(function ($stateProvider) {
});
app.controller('myController', function ($state, $scope) {
$state.go('index');
});
</script>
</body><div class="row">
<div class="col" ng-repeat="name in views">
</div>
</div>
<!-- 生成多个 cyf-nav-view -->
<!-- cyf-nav-view 可用来替代 ion-nav-view -->
<!-- ion-nav-view 不支持动态绑定 name 属性，但 cyf-nav-view 可以 -->
<cyf-nav-view name="{{name}}"></cyf-nav-view>
<!-- cyf-nav-view 可用来替代 ion-nav-view -->
<!-- ion-nav-view 不支持动态绑定 name 属性，但 cyf-nav-view 可以 -->
<script id="tpl0" type="text/ng-template">
<ion-view view-title="tpl0">
</script>
<ion-content>
</ion-view>
这是tpl0的内容
</ion-content>
<script id="tpl1" type="text/ng-template">
<ion-view view-title="tpl1">
</script>
<ion-content>
</ion-view>
这是tpl1的内容
</ion-content>
<script type="text/javascript">
// 要使用 ion-cyf-directives 中的子令，需依赖于 cyfDirectives 模块
var app = angular.module('myApp', ['ionic', 'cyfDirectives']);app.config(function ($stateProvider) {
// 配置路由
$stateProvider.state('index', {
views: {
view1: {
}
});
// 页面中存在两个 cyf-nav-view，其 name 属性分别为 view0、view1
view0: {
templateUrl:'tpl0'
},view1: {
templateUrl:'tpl1'
}
app.controller('myController', function ($state, $scope) {
// 需生成两个 cyf-nav-view，其 name 属性分别为 view0、view1
$scope.views = ['view0', 'view1'];$state.go('index');
</html>
编辑好后，在浏览器中查看：
最后，来个广告
若你觉得此文不错，请分享，若认为尚需改进，请点讚。