AngularJS isolated directives inheriting surrounding or parent scope

Question

I have put up my code at jsbin: http://jsbin.com/fewom/1/edit

If any one can guide me, what am I doing wrong there. I have specified scope to be isolated inside myDirective with scope: {} but still when i write myProperty inside my directive in html I am able to read myProperty.

I was using AngularJS https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js

When i changed my library to it started to work,

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js

then I have tried,

Angular JS version 1.2.16 https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js

and

Angular JS version 1.3.0-beta.5 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js

and the problem for isolated scoping shows up again.

Phil Sandler Phil Sandler · Accepted Answer · 2014-04-07T22:57:38

You don't have a controller, so nothing ties your directive to your html.

Change your js to this (I just added a blank controller):

angular.module('myApp', [])
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            scope: {}
        };     
    })
.controller('ctrl', function (){

});

and in your html, change to this (referenced the controller):

<html ng-app="myApp" ng-controller='ctrl'>

AngularJS isolated directives inheriting surrounding or parent scope

1 Answers