ECMA6指令的動態控制器

Question

我正在嘗試使用name屬性將控制器動態設置為我的指令。 到目前為止，這是我的代碼。

html

<view-edit controller-name="vm.controller" view="home/views/med.search.results.detail.resources.audios.html" edit="home/views/med.media.resources.edit.html"></view-edit>

js

export default class SearchResultsCtrl extends Pageable {

  /*@ngInject*/
  constructor($injector, $state, api) {

    super(
      {
        injector: $injector,
        endpoint: 'mediaMaterialsList',
        selectable:{
          itemKey: 'cid',
          enabled:true,
          params: $state.params
        },
        executeGet: false
      }
    );

    this.controller = SearchResultsResourcesAudiosCtrl;
  }
}

指示

export default class ViewEditDirective {

  constructor() {
    this.restrict = 'E';
    this.replace = true;
    this.templateUrl = 'home/views/med.view.edit.html';
    this.scope = {};
    this.controller = "@";
    this.name = "controllerName";
    this.bindToController = {
      'view': '@?',
      'edit': '@?'
    };

    this.open = false;
    this.controllerAs = 'ctrl';
  }
}

我undefined為vm.controller undefined 。 我猜想它是在控制器可以將控制器分配給變量之前渲染的（我調試了它，並在變量中設置了控制器）。

我正在遵循此答案來實現這一目標，但到目前為止還沒有運氣。 如何為指令設置動態控制器？

謝謝。

Answer 1

該問題與ES6無關（這是ES5上的糖語法塗層），這就是Angular作用域生命周期的工作方式。

該指令可以顯示屬性插值的處理方式

// <div ng-init="a = 1"><div sum="{{ a + 1 }}"></div></div>
app.directive('sum', function () {
  return {
    scope: {},
    controller: function ($attrs) {
      console.log($attrs.sum) // {{ a + 1 }}
      // ...
    },
    link: function (scope, element, attrs) {
      console.log(attrs.sum) // 2
    }
  };
});

如果在此之后設置a值（即在父指令link ），則$attrs.sum在link仍可能不是2 。

假設可以在某個時間點根據另一個范圍的值來計算一個范圍的值是不安全的（本身就是錯誤的）。 因為可能不是。 這就是為什么存在觀察者和數據綁定的原因。

controller: '@'所有作用controller: '@'魔術值所做的就是獲取未插值的屬性值 ，並將其用作控制器名稱。 因此，不會，它不會從vm.controller內插控制器名稱， vm.controller將'vm.controller'字符串用作控制器名稱。

允許動態設置其控制器的指令示例如下所示：

// dynamic-controller="{{ ctrlNameVariable }}"
app.directive('dynamicController', function () {
    return {
        restrict: 'A',
        priority: 2500,
        controller: function ($scope, $element, $attrs, $interpolate, $compile) {
            var ctrlName = $interpolate($attrs.dynamicController)($scope);

            setController(ctrlName);
            $attrs.$observe('dynamicController', setController);

            function setController (ctrlName) {
                if (!ctrlName || $attrs.ngController === ctrlName) {
                    return;
                }

                $attrs.$set('ngController', ctrlName);
                $compile($element)($scope);
            }
        }
    };
});

以及重新編譯可能帶來的所有副作用。