Angularjs- directive scoping

Question

Angularjs- directive scoping

Please refer to this fiddle for complete example: http://jsfiddle.net/lesouthern/WnvjF/7/

.directive('redirectEnterKey',function() {
    return {
        restrict : 'A',
        controller : function() {}
    }
})
.directive('redirectEnterKeyTo', function() {
    return {
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $scope.enterKeyElement = $element;
        }
    }
})
.directive('redirectEnterKeyFrom', function() {
    return {
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $scope.enterKeyElement.click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }
});

I want to isolate scope on the variable "enterKeyElement" to directives redirectEnterKey, redirectEnterKeyTo, and redirectEnterKeyFrom.

But, want to share scope on variable "myInput" with "pageCtrl".

Can I do this? And not have to reference "myInput" in these directives? Is this a best practice?

thanks!

angularjs

Answer 1

You question is not entirely clear to me but i think you can create isolated scope from parent scope and just include some properties if required from the parent scope like i have added myInput property to isolated scope which will refer to ng-model attribute of the parent

.directive('redirectEnterKeyFrom', function() {
    return {
        scope:{myInput'=ngModel'} 
        restrict : 'A',
        require : '^redirectEnterKey',
        link : function($scope,$element) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $scope.enterKeyElement.click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }

});

Answer 2

Thank you for trying to help me, and you gave me some good clues. This was a good education in angular scoping.

And please pardon my incomplete question. Here is another example of the problem here: http://jsfiddle.net/lesouthern/jJ2Rj/

Note that because of shared scope, the incorrect input is being hidden.

This the answer to my own question: http://jsfiddle.net/lesouthern/FZXUP/, for anyone who this would help.

Basically each directive has their own scope, and can bind to the parent controller, through the parent directive 'redirectScopeExample'

var pageModule = angular.module('pageModule',[])
.controller('pageCtrl',['$scope',function($scope) {
}])
.directive('redirectScopeExample',function() {
    return {
        restrict : 'A',
        scope : {
            hideElement : '&',
            redirectScopeExampleInput : '=ngModel'
        },
        controller : function($scope) {
        }
    }
})
.directive('redirectScopeExampleTo', function() {
    return {
        restrict : 'A',
        require : '^redirectScopeExample',
        link : function($scope,$element,$attr) {
            $element.click(function() {
                $scope.hideElement.toggle();
            });
        }
    }
})
.directive('redirectScopeExampleFrom', function() {
    return {
        restrict : 'A',
        require : '^redirectScopeExample',
        link : function($scope,$element,$attrs) {
            $scope.hideElement = $element;
        }
    }
});