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

我有一个自定义指令，希望继承父范围。我还想通过属性传递一个值。看起来是这样的：

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

控制器

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

 };
});

wrApp.directive（“custh”，function（））{
返回{
限制：“EA”，
范围：假，
替换：正确，
模板：“{colname}}”，
};
});

HTML

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

---

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

只要不在指令中声明隔离作用域，就可以访问父作用域：

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

---

不可以。继承父范围时不能访问指令属性。为此，您必须创建指令自己的作用域，如下所示：

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

在yout HTML remplate中，您必须这样写：

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

我还为你制作了一把小提琴。如果你觉得这很有用，那么请接受这一回答

---

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

scope: true

然后，为了传递值：

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

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

你可以在这里看到所有这些：

---

模板可以是字符串或函数：

模板

HTML标记可能：

替换指令元素的内容（默认）。替换 指令的元素本身（如果replace为true-已弃用）。包裹 指令元素的内容（如果transclude为true）。价值可能 是：

一串。例如

{{delete_str}}

。 采用两个参数tElement和tAttrs的函数（如中所述） 编译函数api）并返回字符串值

请参见第页的示例

---

请参见位于

的文档，我试图通过属性将colname传递给指令，因为该值与指令的范围隔离，但我也需要引用父范围中的对象。我开始认为我必须重新考虑我的方法，但有没有方法使用该方法引用父范围你描述过吗？

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