When I put my ion-header-bar in a seperate file (header-dash.html
) and assign it as a directive "headerDash
", I seem not to be able to access my DashCtrl
or the controller of my view where the header-dash directive is called. More specific, in the code below, I cannot call the function changeDashMode()
. However, when I replace <header-dash></header-cash>
with the content of header-dash.html, then everything works fine.
I guess it has something to do with the setup of the directive, anyone thoughts?
Update: newImport()
also in header-dash does work... it is when I added another function changeDashMode that it does not work. What is going on?
controllers.js
.controller('DashCtrl', function($scope) {
// -------------------------------------------------------------------------
// Init
$scope.dashMode = false;
// ---------------------------------------------------------------------------
$scope.changeDashMode = function() {
console.log("test")
if (!$scope.dashMode) {$scope.dashMode = true;} else {$scope.dashMode = false;}
}
// and the rest of the controller
// ...
})
header-dash.html
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-light" ng-click="newImport()">+ New</button>
</div>
<h1 class="title"><logo></logo></h1>
<div class="buttons" ng-controller="DashCtrl">
<button class="button button-light" ng-show="!dashMode" ng-click="changeDashMode()">Select</button>
<button class="button button-light" ng-show="dashMode" ng-click="changeDashMode()">Edit</button>
</div>
</ion-header-bar>
tab-dash.html
<ion-view view-title="Dashboard">
<header-dash></header-dash>
<ion-content has-bouncing="true" has-header="true">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item>Select mode? {{dashMode}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
directives.js
angular.module('starter.directives', [])
.directive('headerDash', function() {
return {
restrict: 'E',
templateUrl: 'templates/header-dash.html' // tried to add controller: "DashCtrl" but that didnt work
}
})
Is tab-dash.html being the template displayed by the DashCtrl?
Because in header-dash.html, you're using ng-controller
again, creating an child scope, effectively having DashCtrl in DashCtrl
<div class="buttons" ng-controller="DashCtrl">