Setting scope properties in link function

Question

See codepen.

What do I have to do to make scope.test visible in my HTML when I give my directive an isolated scope, replacing "scope: false" with "scope: {}"?

My directive:

angular
  .module("MyApp", [])
  .directive("myDir", () => {
    return {
      scope: false,
      restrict: "A",
      link: (scope, element) => {
          scope.test = 'my test';
      }
    };
  });

My HTML:

<div ng-app="MyApp">
  <div my-dir>{{test}}</div>
</div>

No Controller, only link function in my directive.

Answer 1

Earlier it had work because you had scope: false (shared scope).

In your case adding scope: {} to directive wouldn't reflected test value changes on screen. Because when scope: {} isolated scope created in directive, it binds that scope to the directive template if it present. In your case you don't have any template in your directive.

If you wanted to see input value you could change it by

1. Either using $parent convention like scope.$parent.test = 'my test'
2. OR shift the {{test}} inside directive template so that isolated scope will get compiled with directive template.