Question

基本上HTML看起来像：

<data>
    <definition-data></definition-data>
</data>

在我的数据模板文件中，我有以下内容：

<div ng-controller="dataCtrl as dataitems" ng-cloak>
    {{dataitems.loadItem}}
</div>

在我的定义数据模板中，我尝试访问dataitems.loadItem，但是尽管它继承了父数据范围，但仍然无法访问。

我试过了：

<div ng-controller="definitionCtrl as definition" ng-cloak>
    <h3>{{dataitems.loadItem}}</h3>
</div>

哪个没出现。

在我的数据控制器文件中，我有：

var self = this;
self.loadItem = 3;
return self;

编辑：按要求定义数据指令

angular.module('s').directive('definitionData', function() {
   return {
      restrict: 'EA',
      templateUrl: 'definition/definition.tpl.html',
      scope: {}
   };
});

数据指令：

angular.module('s').directive('data', function() {
   return {
      restrict: 'EA',
      transclude: true,
      scope : true,
      templateUrl: 'data/data.tpl.html'
   };
});

Answer 1

所以，我认为有很多事情是不正确的（我只是假设你可能会追求的是什么）。

首先，您不应在指令的模板中声明app控制器。它超越了指令的可重用性的目的。在指令的定义中使用控制器（如果控制器只处理指令的功能），或者 - 如果控制器属于应用程序，则在指令本身（而不是模板）上声明ng-controller 。我假设你想要后者，所以这样做：

<data ng-controller="dataCtrl as dataitems">
    <definition-data ng-controller="definitionCtrl as definition"></definition-data>
</data>

第二次，当您声明指令的范围时，如下所示：

{ ...
  scope: {}
}

您正在创建隔离范围。如果您打算继承父级的范围，请定义scope: true。

第三次，您需要将已转换的元素放在<data>指令模板中的某个位置：

<div ng-controller="dataCtrl as dataitems">
    {{dataitems.loadItem}}
    <div ng-transclude></div>
</div>

最后，transcluded元素（definition-data）获取transcluding指令（data）的父级范围，但是您的dataCtrl控制器已定义关于元素本身。（我实际上期望dataCtrl在范围内，但它不是。）

所以，如果你做了这样的事情，那就行了：

<div ng-controller="dataCtrl as dataitems">
  <data>
    <definition-data ng-controller="definitionCtrl as definition"></definition-data>
  </data>
</div>

由于我不确定您要实现的目标，我无法给您更好的答案。这个答案只是处理你所面临的症状。

控制器继承不能与控制器一起使用作为语法

1 个答案: