I have this directive that changes $scope.mode
in the parent $scope
:
angular.module('Selector', []).directive('mySelector', function() {
var changeMode;
changeMode = function(newmode) {
var $scope;
$scope = this;
$scope.mode = newmode;
$('.menu-open').attr('checked', false);
return $scope.mode;
};
return {
restrict: 'E',
scope: {
mode: '=mode',
id: '@id'
},
replace: true,
templateUrl: './directives/modeSelector/Selector.tpl.html',
link: function(scope, element, attrs) {
scope.changeZoneMode = changeMode;
return scope.$watch((function() {
return scope.mode;
}), function(newMode) {
return scope.mode = newMode;
});
}
};
});
this directive is included into main.html, as well as a ui-view that loads a subview:
<my-selector mode="current.Mode" id="{{current.ID}}"></my-selector>
<!-- This binding works and updates properly -->
{{current.Mode}}
<!-- Subview container -->
<div ui-view="sub"></div>
subviewTemplate.html:
<!-- This binding doesn't work! -->
{{current.Mode}}
the subview doesn't have a specific controller, and it uses the parent one, as from the settings in app.js:
.state('app.details', {
name: 'appDetails',
url: '/:zoneID',
views: {
'appContent': {
templateUrl: 'main.html',
controller: 'ctrl'
}
}
}).state('app.details.overview', {
name: 'appDetailsOverview',
url: '/details',
views: {
'appContent': {
templateUrl: 'main.html',
controller: 'ctrl'
},
'sub': {
templateUrl: 'subviewTemplate.html',
controller: 'ctrl'
}
}
});
and the controller used by both main.html and subviewTemplate.html:
angular.module('myController', ['services']).controller('ctrl', [
'$scope', 'Data', function($scope, Data) {
$scope.current = new Data;
$scope.current.load();
return $scope.$watch('current.Mode', (function(newValue, oldValue) {
console.log('Old value is: ' + oldValue);
$scope.current.Mode = newValue;
return console.log('new value is: ' + $scope.currentMode);
}), true);
}
]);
I don't understand why it works on main.html, updating properly, but not on subviewTemplate.html. console.log
inside $watch
prints the right value.
Any help? What Am I doing wrong here?
You're initializing a new instance of the ctrl controller. Remove that line and it'll use the parent controller which will be ctrl. For example:
'sub': {
templateUrl: 'subviewTemplate.html'
}