Angular directive with isolated scope "breaks" other directives (ng-required, ng-disabled)
angularjs, angularjs-directive
Solution
The issue is that a scope applies to an entire DOM element (i.e., `<input>` in this case), and `my-directive` is creating an isolate scope that is then applied to `ng-disabled` and `ng-required`. The isolate scope doesn't prototypically inherit from the enclosing scope, so `isActive` isn't visible within it.
You can map that scope property into the isolate scope by explicitly providing it as an attribute on the isolate scope, and then referencing the local version of the attribute from `ng-required` and `ng-disabled`. E.g., in the directive definition:
scope: {
myActive: '='
}
The '=' sets up a 2-way binding to the expression given in the `my-active` attribute on that element, with local name `myActive`.
In the `<input>` tag:
my-directive my-active="isActive" ng-required="myActive" ng-disabled="!myActive"
`my-active="isActive"` ties `isActive` in the parent scope to `myActive` in the isolate scope.
I've updated your plunker demonstrating this.
Problem
Please try it live at Plunker - http://plnkr.co/edit/js7WOhjgKwUeElrdNwv0?p=preview How can I work around this, please? Unlike the example at Plunker and below, the directive I am working on needs an isolated scope (or at least the current implementation uses one and I would rather not rewrite it). ``` <!DOCTYPE html> <html> <head> <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require="angular.js@*" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <script> var app = angular.module("MyApp",[]); app.directive("myDirective", function(){ return { //scope:{}, link: function(){} }; }); </script> <style> .ng-invalid{ border: 1px solid red; } </style> </head> <body ng-app="MyApp"> <h1>My Directive</h1> <p>Test the checkbox below then uncomment //scope:{} and try again.</p> <input type="checkbox" ng-model="isActive" /> <input type="text" ng-model="foo" my-directive ng-disabled="!isActive" ng-required="isActive" /> </body> </html> ``` Best regards, Hans