How can I change the scope of my element from an attribute directive?

Question

<input type='text' ng-model='foo' my-dir='customFunction' />
{{foo}}


.directive('myDir',function(){
     scope:{ customFunc : "&myDir"},
 });

Now the scope will be overridden with myDir and foo won't be updated on the screen. But still each control that has my-dir attribute should have customFunction in an isolated scope.

Is it possible?

Answer 1

As mentioned in the comments above, one directive probably won't work everywhere. If the directive will be used with other directives like ng-model, ng-repeat, etc., an isolate scope probably won't work. Here's an example of a directive that uses $eval, and does not create a new scope:

<div ng-controller="MyCtrl">
  <input type='text' ng-model='foo' my-dir='customFunction'>
  <br>foo={{foo}}
</div>


app.directive('myDir', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$eval(attrs.myDir);
        },
    }
});


function MyCtrl($scope) {
    $scope.customFunction = alert('hi');
    $scope.foo = '22';
}

Fiddle

See also When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?