Question

如果我有两个指令，一个是表，一个是一行。在这种情况下，每次行都相同，我只想在index.html中显示两次。 <table-row>在index.html中有效，但<table>不是为什么？

即：

.directive('table', function() {
  return {
    restrict: 'E',
    scope: {},
    controller: 'table-ctrl',
    controllerAs: 'ctrl',
    bindToController: true,
    template:`
      <div>
        <table-row></table-row>
        <table-row></table-row>
      </div>`
  };
});

表格行：

.controller('TableRowCtrl', function() {
  this.toggle = function() {
     this.toggleBool = !this.toggleBool;
  }
  //
  this.toggleBool = false;
})

.directive('TableRow', function() {
  return {
    scope: {},
    restrict: 'E',
    replace: true,
    controller: 'TableRowCtrl',
    controllerAs: 'ctrl',
    bindToController: true,
    template: `
      <div>
        <span>Object</span>
        <span>
          <img ng-click="ctrl.toggle()" src="jpeg file" />
        </span>
        <span ng-if="ctrl.toggleBool"> Print </span>
      </div>`
  };
});

如果table-row是执行所有操作的另一个指令，其控制器也是点击等运行的，那么我将如何链接table-row指令以便table指令模板工作，并会多次拨打table-row。我想继续使用ControllerAs语法而不是$scope。

Answer 1

如果您想使用controllerAs，则无关紧要。从您的代码table指令中隔离范围，并假设您想通过使用table-row指令迭代ngRepeat项，它也应该是隔离范围。

请记住，每个ngRepeat的项目都有自己的范围

例如：

.directive('table', function() {
  return {
    restrict: 'E',
    scope: {},
    controller: 'table-ctrl',
    controllerAs: 'ctrl',
    bindToController: true,
    template:
      <div ng-repeat="item in ctrl.items">
        <table-row item="item"></table-row>        
      </div>`
  };
});

使用ControllerAs语法在指令内的自定义指令

1 个答案: