How to update the `$scope` object from `directive` controller

Question

I am trying to update the $scope object from controller, But it's not updating. but in console i am getting 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.

            }


        }

    }

}];

Answer 1

Your directive is using scope: true that means you have create a scope which is prototypically inherited from parent scope.

Then your galleryShow object should follow dot rule

$scope.model = {};
$scope.model.galleryShow = 'something';

So then in your directive you could get $scope.model object by prototypal inheritance and you could change it by $scope.model.galleryShow will change 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.
     }
  }