AngularJS自定义指令在继承父作用域时访问模板中的属性

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?

Answer 1

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';

Answer 2

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/

Answer 3

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/

Answer 4

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