Directive isolated scope with transcluded HTML

Question

I am running into some issue regarding isolated scopes. I have a directive which i need to use at many places and its controller has some helper functions for the directive. The directive does create isolated scopes but the template refers to the parent scope. Below is a plunk to demo that issue

http://plnkr.co/edit/LQnlSjMHeatMkmkYZyfk

$scope.text = "test";

is to demo that the property does not change in the isolated scope and refers to the parent scope. Due to this issue i am unable to call the helper functions for each isolated scope. I hope I am able to describe my problem properly.

Below is the code

HTML:

<body ng-controller="MainCtrl">
        <div transfer-box style="">
            {{text}}
        <div ng-if="refresh" ></div>
            {{refresh}}
        </div>
    <div transfer-box style="">
            {{text}}
        <div ng-if="refresh" ></div>
            {{refresh}}
        </div>
  </body>

Javascript:

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

app.controller('MainCtrl', function($scope) {
  $scope.text = 'World';
  console.log("parent scope id "+ $scope.$id); 
});
app.directive('transferBox', function() {
      return {
        restrict: 'EA',
        xreplace: true,
        transclude: true,
        scope:true,
        template: '<div class="container-fluid" style="height:100%" ng-transclude></div>',
        controller:'transferBoxCtrl'
      };
    })
app.controller('transferBoxCtrl',['$scope',function($scope){
  console.log($scope.$id);
        $scope.refresh = true;
        $scope.text = "test";
    }])

You are using a external controller to the directive! Bad, bad Idea! You should create a directive controller to the directive instead! — Fals, Jul 16 '15 at 13:27
Can you please edit the plunk so I can understand it properly. — user1624859, Jul 16 '15 at 13:30

Matt Herbstritt · Answer 1 · 2015-07-16T13:40:41.023

You haven't created an isolate scope. You need to pass an object to the scope property like this for example:

app.directive('transferBox', function() {

  return {
    restrict: 'EA',
      xreplace: true,
    transclude: true,

    // create an isolate scope
      scope:{
        text: '=?'
      },

    template: '<h1>{{text}}</div>',

      // define directive controller within the directive definition
      controller: function($scope){
         $scope.text = $scope.text || 'default'
      }

  };



});

index.html

<body ng-controller="MainCtrl">

      <div transfer-box text="text" ></div>
      <div transfer-box ></div>

  </body>

Notice, also, that the controller is defined within he directive definition so no need for any calls to app.controller().

Read the docs regarding the 'Directive Definition Object' for more details on how to define an isolate scope.

DEMO - shows a modified version of your code showing how you might implement an isolate scope shared between directive and parent controller.

Hi Matt, the issue i am facing is with transclude, as the content in the directive can be different. I changed you plunk to demo the issue http://plnkr.co/edit/W8yilxCU6GBgc1anRUwc — user1624859, Jul 16 '15 at 13:44

score 0 · Answer 2 · answered Jul 16 '15 at 14:05

0

This is not possible because angular load child first, here transfer-box directive is a child and then MainCtrl controller which is parent.

So child variable always get replaced by parent.

Solution provided by Matt Herbstritt is great.

Thank you

answered Jul 16 '15 at 14:05

PAWAN RAJ Shakya

166
10

score 0 · Accepted Answer · answered Jul 17 '15 at 03:20

0

The issue was with transcluded HTML. I found a link with exactly the same description about the issue I am facing. I will give it a try but just posting it for others reference.

http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

answered Jul 17 '15 at 03:20

user1624859

13
4

Directive isolated scope with transcluded HTML

3 Answers3