Angularjs 1.2.9 Scope Isolation

Question

I'm using Scope Isolation in one of my directives. However, this doesn't seem to work:

<div ng-controller="MyCtrl">
  Hello, {{name}}!
    <dir info='spec'>
        {{ data }}
    </dir>
</div>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.spec = 'Super';
}

myApp.directive('dir', function(){
    return {
      restrict: 'AE',
      scope:{
        data: '=info'
      }
    }
});

Fiddle: enter link description here

score 2 · Accepted Answer · edited May 23 '17 at 10:31

Here is a fiddle: http://jsfiddle.net/WA5t5/

Since this commit(1.2) Child elements that are defined either in the application template or in some other directives template do not get the isolate scope.

You can do this instead:

myApp.directive('dir', function(){
    return {
      restrict: 'AE',
      scope:{
        data: '=info'
      },
        template: "{{ data }}"
    }
});

If you want to alter this behavior check my other answer: Why I can't access the right scope?

Khanh TO · Answer 2 · 2014-01-26T08:56:42.973

Try:

myApp.directive('dir', function(){
    return {
      restrict: 'AE',
      scope:{
        data: '=info'
      },
      template:"<div>{{data}}</div>"
    }
});

DEMO

Another solution using transclusion to bind the scope yourself:

myApp.directive('dir', function(){
    return {
      restrict: 'AE',
      scope:{
        data: '=info'
      },
      transclude:true,
      compile: function (element, attr, linker) {
          return function (scope, element, attr) {
          linker(scope, function(clone){
                element.append(clone); // add to DOM
          });
          };
      }
    }
});

You can still use the same html as before:

<div ng-controller="MyCtrl">
  Hello, {{name}}!
    <dir info='spec'>
        {{data}}
    </dir>
</div>

DEMO

score 0 · Answer 3 · answered Jan 26 '14 at 09:17

You should have a template defined in your directive where you show the data scope variable. The html code does not know what the data scope variable is, it's only known in the directive's template. See this demo

myApp.directive('dir', function () {
    return {
        restrict: 'AE',
        scope: {
            data: '=info'
        },
        link: function (scope, element, attrs) {
            console.log(scope.data);
        },
        template: 'Hello {{data}}'
    }
});

Angularjs 1.2.9 Scope Isolation

3 Answers3