0

Ng-table(ng-table site) can put $data variable outside from their directive to 'user' domain. As long as I know, I can use and abuse this $data variable as I like as long as it happens inside <table ng-table></table> like this :

<table ng-table="vm.tableParams" class="table" show-filter="true">
  <tr ng-repeat="user in $data"> <---- where is this $data comes from ?

  </tr>
</table>

I want to do the same with my directive, so I made this:

[JS]

 angular.module('app', [])
  .controller('Controller', ['$scope', function($scope) {
      $scope.variable = "some random variable";
  }])
  .directive('myTable', function() {
   return {
      restrict    : 'E',
      transclude  : true,
      templateUrl : 'my-table.html',
        controller: function($scope){
        $scope.foo = "hello world";
     }
  };
});

[HTML my-table.html]

<div ng-transclude></div>

[HTML index.html]

<my-table ng-model="variable">
     <div>{{ foo }}</div>  <!-- foo comes from directive, not controller -->
</my-table>

it works! working sample, But when I add scope to directive :

return {
  restrict: 'E',
  transclude: true,
  scope:{
    ngModel : "="
  },
  templateUrl: 'my-table.html',
  controller: function($scope){
    $scope.foo = "hello world";
  }
}

It destroys foo variable so it doesn't work anymore not working sample.

I just want foo variable INSIDE the directive to be exposed OUTSIDE so I can use it in index.html just like ng-table example above. How to achive this?

DennyHiu
  • 4,861
  • 8
  • 48
  • 80
  • Did you try `{{ variable }}` in `
    `?
     – Roger Ng Nov 24 '16 at 09:29
  • You can test it in https://plnkr.co/edit/UmDWM2rBnYVuMxXcEACM?p=preview, and yes I tried it and just as I expected, it shows nothing as `variable` is outside of directive – DennyHiu Nov 24 '16 at 09:31
  • I'm not sure if I get your question. Does this solve your problem? https://plnkr.co/edit/RTa2dObiF1hLyIdae6Ba?p=preview – Roger Ng Nov 24 '16 at 09:32
  • No, I just made small revision to the end of my question. I want `foo` to be exposed outside of the directive not `variable`. Look into https://plnkr.co/edit/0ShOpcRz1aVTFEKeQe35?p=preview, it shows `hello world`, it comes from inside the directive itself – DennyHiu Nov 24 '16 at 09:35
  • @RogerNg Yes, It solves my problem, but I got another : this solution won't work for newer angular versions or maybe I'm doing it wrong. Please check here, it is a simpler version from your reference : https://plnkr.co/edit/UmDWM2rBnYVuMxXcEACM?p=preview, notice that it works for 1.0.1 and don't for 1.3x or 1.5x ('hello' not shows up) – DennyHiu Nov 24 '16 at 10:12
  • There was a breaking change in 1.2. The `{{ isolatedAttributeFoo }}` has got to be in the template. Check out this https://plnkr.co/edit/jNssHtJfxwKWu1lL0pqM?p=preview. – Roger Ng Nov 25 '16 at 04:54

1 Answers1

1

if you want the foo to to be exposed outside so add foo to your scope property of directive

return {
  restrict: 'E',
  transclude: true,
  scope:{
    ngModel : "=",
    foo : "=" //here we state that foo INSIDE will be the same as passed from higher level
  },
  templateUrl: 'my-table.html',
  controller: function($scope){

  }
}

and the template will look like this

{{bar}}
<my-table ng-model="variable" foo="bar">
     <div>{{ foo }}</div>  <!-- this is internal 'foo' now which is equal to upper 'bar' value-->
</my-table>

Here is the demo with your plunk: https://plnkr.co/edit/VqmaxG2fIFO4k9JrQYRs?p=preview

shershen
  • 9,875
  • 11
  • 39
  • 60