因为，我正在重构我的代码，我看到我在不同的视图中有一些html模板（或多或少相同） . 所以我尝试制作一个自定义指令，以便我可以避免重复 . 但后来我看到了离子视图，离子含量与往常不同 .
我在这里设置了一个plnker： - https://plnkr.co/edit/ArcLKhsJrwDlJuNxpxYA?p=preview这个plnkr有两个按钮，每个标签有不同的Id . 第一个按钮（使用my-view指令）不会更新导航栏（即显示后退按钮和更改 Headers ），但第二个按钮会更新 . 请让我知道纠正我的指令和标记的正确方法 .
我试图找出它为什么不工作的原因并且感觉my-view指令内的ion-view没有直接访问其Required父级（如文档所述）即ie . 离子NAV-图 . 但我想 - 如果专家可以告诉我，可能会有一个解决方法 .
编辑： - 当您尝试plnkr时，蓝色按钮选项卡没有后退按钮 . 您可以使用alt左箭头键返回主页 .
提前致谢 .
(function (angular) {
angular
.module("testApp", ["ionic"])
.config(Routes)
.directive("myView", MyView)
.controller("TabCtrl", TabCtrl)
Routes.$inject = ["$stateProvider", "$urlRouterProvider", "$ionicConfigProvider"]
function Routes(StateProvider, UrlRouterProvider, IonicConfigProvider) {
// Enabling Native Scroll
IonicConfigProvider.scrolling.jsScrolling(false)
var states = {
"home": {
name: "home",
url: "/",
templateUrl: "templates/home.html",
},
"tab": {
name: "tab",
url: "/tab/:id",
template: '<my-view tab-id="vm.id" ></my-view>',
controller: "TabCtrl as vm"
},
"tab2": {
name: "tab2",
url: "/tab2/:id",
templateUrl: 'templates/myView.html',
controller: "TabCtrl as vm"
}
}
// Registering states
var state
for (state in states) {
StateProvider.state(states[state])
}
UrlRouterProvider.otherwise("/")
}
TabCtrl.$inject = ["$state", "$stateParams"]
function TabCtrl(State, StateParams) {
var vm = this
vm.id = StateParams.id
}
MyView.$inject = []
function MyView() {
return {
restrict: "E",
scope: {
id: "=tabId"
},
controller: ["$scope", "$timeout", MyViewCtrl],
controllerAs: "vm",
bindToController: true,
templateUrl: "templates/myView.html"
}
function MyViewCtrl(Scope, Timeout) {
var vm = this
console.log(Scope)
// Making sure controller as an impact on view
vm.loading = true
Timeout(function () {
vm.loading = false
}, 500)
}
}
})(angular)
/* Styles go here */
div.spinner {
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
}
div.spinner ion-spinner {
position: relative !important;
top: -50% !important;
left: -50% !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-app="testApp">
<!-- nav-bar -->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<!-- nav-view -->
<ion-nav-view></ion-nav-view>
</body>
<script id="templates/home.html" type="ng/template">
<div id="home">
<ion-view view-title="home">
<ion-content class="padding has-header">
<div class="list">
<div class="item"
ng-repeat="id in [1,2,3,4,5] track by $index">
<button class="button button-positive" ui-sref="tab({id: id})">TabType1 - {{id}}</button>
<button class="button button-assertive" ui-sref="tab2({id: id})">TabType2 - {{id}}</button>
</div>
</div>
</ion-content>
</ion-view>
</div>
</script>
<script id="templates/myView.html" type="ng/template">
<div>
<ion-view view-title="{{vm.id}}">
<div class="spinner" ng-if="vm.loading">
<ion-spinner icon="android"></ion-spinner>
</div>
<ion-content class="padding has-header">
<h3 ng-show="!vm.loading">
Tab :- {{vm.id}}
</h3>
</ion-content>
</ion-view>
</div>
</script>
</html>