I have an AngularJS directive that has a non-isolated scope. I do, however, have one variable that I would like to be isolated to only the directive (it is an "isOpen" flag). For instance:
app.directive('myDir', function() {
return {
restrict: 'A',
scope: {},
link: function(scope, element, attrs) {
scope.isOpen = false;
}
}
});
...gives me an isolated scope. I need to be able to assign a controller somewhere before myDir and have the scope of that controller be available inside myDir while at the same time isolating scope.isOpen so that I can have multiple instances of this directive on one page.
The scope of the parent controller is available inside of your directive, even if you've isolated the scope via the $parent property on your directive's scope.
app.directive('myDir', function() {
return {
restrict: 'A',
scope: {},
link: function(scope, element, attrs) {
scope.isOpen = false;
scope.$parent.whatever; //this came from your containing controller.
}
}
});
Be careful though... it becomes very easy to tightly couple your directives and controllers in this manner. In most cases, you're probably better off linking properties of your scopes with your scope declaration and attributes in your markup like so:
The directive:
app.directive('myDir', function() {
return {
restrict: 'A',
scope: {
propFromParent: '=prop',
funcFromParent: '&func'
},
link: function(scope, element, attrs) {
scope.isOpen = false;
scope.$parent.whatever; //this came from your containing controller.
}
}
});
The markup:
<my-dir prop="foo" func="bar()"></my-dir>
Your controller:
app.controller('SomeCtrl', function($scope) {
$scope.foo = 'test';
$scope.bar = function() {
$scope.foo += '!';
};
});