How to update `$ scope` object from` directive` controller
I am trying to update an object $scope
from a controller, but it is not updating. but in the console I get the updated status.
here is my code:
var galleryMenu = ['$route', function ($route) {
return {
scope : true,
replace : true,
template : function () {
var page = $route.current.className || 'home';
return galleryMenuItem(page);
},
controller : function ($scope, $element) {
$scope.galleryProject = function () {
$scope.galleryShow = !$scope.galleryShow;
console.log($scope.galleryShow) //gives me true, but `DOM` not updating.
}
}
}
}];
source to share
Your directive uses scope: true
, which means you created a scope that is prototypically inherited from the parent scope.
Then your object galleryShow
should follow dot rule
$scope.model = {};
$scope.model.galleryShow = 'something';
So then, in your directive, you can get the object $scope.model
through prototypal inheritance, and you can change it to $scope.model.galleryShow
by changing the parent scope.
Directive controller
controller : function ($scope, $element) {
$scope.galleryProject = function () {
$scope.model.galleryShow = !$scope.galleryShow;
console.log($scope.model.galleryShow) //gives me true, but `DOM` not updating.
}
}
source to share