javascript - AngularJS自定义指令在继承父范围的同时访问模板中的属性

Question

我有一个自定义指令，我想继承父范围。我还想通过属性传递一个值。它看起来像这样:

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];
   };
}]);

指令

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>

我似乎无法访问属性值，因为我正在继承父范围。是否可以直接从模板访问指令属性？

Answer 1

您可以继承作用域，也可以使用以下方法创建子作用域:

scope: true

然后为了传递值:

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

这样，在指令的内部作用域中，您可以拥有不同的值，同时仍然可以访问父作用域。

您可以在这里看到这一切的实际情况: http://jsfiddle.net/HB7LU/15120/