Question

我有一个独立的范围指令，它有自己的控制器。

该指令的模板可以访问该控制器，但在整个控制器超出范围的ng-repeat内部除外。

我不知道如何解决它。

如果在ng-controller中有ng-repeat，ng-repeat的子节点将继承ng-controller的功能。

我原以为自定义指令也是如此 - ng-repeat中的子节点仍然可以看到指令的控制器 - 但据我所知，它们不能。

我仍然在加速Angular的速度，所以在正确的方向上轻推将会受到赞赏。一个彻头彻尾的答案将得到更多的赞赏。与翻译有关吗？哪个是先编译？

这是指令：

angular.module('surverApp')
  .directive('surveyItems', function () {
    return {
      restrict: 'E',
      scope: {
        itemList: '=',
        query: '='
        },
      templateUrl: 'views/directives/survey-items.html',
      replace: true,
      controller: 'SurveyItemsCtrl',
      controllerAs: 'ctrl',
      bindToController: true
    };
  })
  .controller('SurveyItemsCtrl', function(){
    var ctrl = this;

    ctrl.disableEdit = true;
    ctrl.disableToolbar = false;
    ctrl.showForm = false;
    ctrl.showDuplicate = false;
    ctrl.showTrash = false;

    ctrl.deleteItem = function(item) {
      console.log('ctrl.item in DELETE ITEM' ,item)

     .... functions removed for brevity
    };

  });

这是它的模板。它的功能都没有发射。

<div>
  <pre>ctrl = {{ctrl | json}}</pre>  <<<<<=== THIS SHOWS THE CONTROLLER IS IN SCOPE
  <div ng-repeat="item in ctrl.itemList | filter:ctrl.query"  class="ubi-box container-fluid">
    <pre>ctrl = {{ctrl | json}}</pre> <<<<<=== THIS SHOWS THE CONTROLLER IS NOT IN SCOPE
    <standard-right-toolbar ctrl="ctrl"></standard-right-toolbar>
    <h4>{{item.name}}</h4>
    <div ng-show="ctrl.showForm" class="ubi-box container-fluid">
      <!-- <survey-form model="item" disable-edit="ctrl.disableEdit" reset-fn="item = ctrl.resetUpdateFn(item)" submit-fn="ctrl.submitUpdateFn()" close-fn="ctrl.hideFormFn()"></survey-form> -->
      <survey-form model-el="item" disable-edit-el="ctrl.disableEdit" reset-fn="ctrl.resetUpdateFn(form,model)" submit-fn="ctrl.submitUpdateFn(form)" close-fn="ctrl.hideFormFn()"></survey-form>
      <pre>model = {{item | json}}</pre>
    </div>
    <div ng-show="ctrl.showDuplicate" class="ubi-box container-fluid">
      <standard-right-close-bar close-fn="ctrl.hideDuplicateFn()"></standard-right-close-bar>
      <h4 class="col-xs-12">Duplicating a survey will copy all the details and questions over to a new survey.</h4>
      <h3 class="col-xs-10">Click the copy button to procede.</h3>
      <button class="btn btn-lg btn-primary" type="button" ng-click="ctrl.copy(item)" title="Duplicate">
        <span class="glyphicon glyphicon-duplicate"></span>
      </button>
    </div>
    <!-- <div ng-show="ctrl.showTrash" class="ubi-box container-fluid"> -->
      <div ng-show="ctrl.showTrash" class="ubi-box container-fluid">
      <standard-right-close-bar close-fn="ctrl.hideTrashFn()"></standard-right-close-bar>
      <h4 class="col-xs-12">Deleting a survey is a very serious matter. It will permanently remove every question and every answer in every questionnaire in every edition in the survey.</h4>
      <h3 class="col-xs-10">Click the trashcan only if you are sure!</h3>
      <button class="btn btn-lg btn-danger" type="button" ng-click="ctrl.deleteItem(item)" title="Delete">
        <span class="glyphicon glyphicon-trash"></span>
      </button>
    </div>
  </div>
<div>

PS我让它在ng-controller中运行良好。但后来我读到ng-controller在Angular 2.0中被取缔了，所以我想我会在某些练习中使用指令控制器而不是ng-controllers而且我将ng-repeat包装在指令中而不是ng-controller中。到目前为止，很难过。。

AngularJS：指令中的ng-repeat掩盖了指令的控制器

0 个答案: