AngularJS Custom Directive Access attributes in Template while inheriting parent scope

Question

I have a custom directive that I would like to inherit the parent scope. I would also like to pass a value via an attribute. It looks like this:

Controller

app.controller('Main', ['$scope', function($scope){
   $scope.cols = { 'col1': true, 'col2':false, 'col3': true};

   $scope.toggleCol = function(colName){
       $scope.cols[colName] = !$scope.cols[colName];
   };
}]);

Directive

wrApp.directive("custTh", function(){
 return {
    restrict: "EA",
    scope: false,
    replace: true,
    template: '<th ng-show="cols[{{ colname }}]" ng-click="toggleCol({{ colname }})">{{ colname }}</th>',

 };
});

HTML

<th cust-th colname="col2"></th>

I just can't seem to get access to the attribute value bc I am inheriting the parent scope. Is it possible to directly access directive attributes from the template?

pacog · Accepted Answer · 2015-07-10 15:05:04Z

1

You can inherit the scope but also create a child scope by using:

scope: true

Then in order to pass values:

link: function(scope, element, attrs) {
     scope.$watch(attrs.valueFromOutside, function(newValue) {
         scope.valueFromOutside = newValue;
     });
 }

This way in the inner scope of the directive you can have a different value while still having access to the parent scope.

You can see it all in action here: http://jsfiddle.net/HB7LU/15120/

answered Jul 10, 2015 at 15:05

pacog

1191 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cjkenn · Accepted Answer · 2015-02-07 01:39:00Z

0

As long as you don't declare an isolate scope in the directive, you can access the parent scope:

<-- cust-th template can access Main controller's scope -->
<div ng-controller="Main">
  <th cust-th></th>
</div>

There are just a few syntax errors in your code that are preventing you from doing this. In your template, you do not need to interpolate the values being passed into the angular directives (ng-click and ng-show):

<th ng-show="cols[colname]" ng-click="toggleCol(colname)">{{ colname }}</th>

colname has not been declared as a scope variable in your controller, so when Angular goes to compile your HTML, it will not recognize it. If you would like to continue passing it as an attribute on your HTML element, you'll need to create an angular element in your directive in order to access the value using a link function (See https://docs.angularjs.org/guide/directive). If you want to use interpolation ( {{colname}} ), then you will need to have a variable in your controller like

$scope.colname = 'col1';

answered Feb 7, 2015 at 1:39

cjkenn

1862 silver badges6 bronze badges

1 Comment

ExceptionLimeCat Over a year ago

I am trying to pass the colname to the directive via an attriubute because that value is isolated to the scope of the directive but I have objects in the parent scope that I need to reference as well.

Satbir Singh · Accepted Answer · 2015-02-07 08:37:25Z

0

No. You can't access directive attributes while you inherit parent scope. To do this you have to create directive's own scope like below:

app.directive("custTh", function(){
      return {
      restrict: "EA",
      scope: { colname: '@'},   
      template: 'Name : {{ colname }}',
    };
});

and in yout HTML remplate you have to write like this:

<div ng-controller="Main">   
   <cust-th colname="col2" ></cust-th>
</div>

I have also created a fiddle for you help. I you find this useful then please accept this as an answer.

http://jsfiddle.net/HB7LU/10806/

answered Feb 7, 2015 at 8:37

Satbir Singh

1412 silver badges6 bronze badges

1 Comment

ExceptionLimeCat Over a year ago

I'm starting to think I'm going to have to rethink my approach but is there a way to reference parent scope using the approach you've described?

user227353 · Accepted Answer · 2016-02-01 21:50:57Z

0

A template can be a string or a function:

template

HTML markup that may:

Replace the contents of the directive's element (default). Replace the directive's element itself (if replace is true - DEPRECATED). Wrap the contents of the directive's element (if transclude is true). Value may be:

A string. For example <div red-on-hover>{{delete_str}}</div>. A function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value.

See example at use attribute in template

See document at Angular Doc

answered Feb 1, 2016 at 21:50

user227353

2,8022 gold badges17 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS Custom Directive Access attributes in Template while inheriting parent scope

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related