Question

我确信我已经把链中的东西搞砸了但是这里有：

我有一堆“窗体小部件”指令，我需要根据用户选择的窗口小部件类型有条件地显示。例如，如果用户选择条形图，我需要显示指令。我用$ compile实现了这个，这是一个相当简单的指令。我正在努力的是试图传递条形图形式的结果。

订单如下：

打开模态
选择小部件类型（模式有一个ng-switch，它将显示下一个指令）
$ compile < widget-form-compiler widgetType="$ctrl.widgetType" output="$ctrl.output" >
应该呈现< bar-chart-form output="$ctrl.output" >
而是呈现为< bar-chart-form output="'undefined'" >

我认为正在评估“输出”而不是作为参考传递。

我真的很感激任何帮助。这是链接中的最后一个链。

如果下面的代码示例不够详细，我可以让JSFiddle在必要时演示我的问题。

更新： 如果我将widget-compiler指令更改为：output =“$ parent。$ ctrl.output”我可以在控制器中访问它来自。当然，这是有道理的，但我怎么能动态地做到这一点？

(function() {
  'use strict';

  angular
    .module('optimizeDashboards')
    .directive('widgetFormCompiler', widgetFormCompiler);

  widgetFormCompiler.$inject = ['$compile'];

  function widgetFormCompiler($compile) {
    // Usage: Generates a widget.
    var directive = {
      link: link,
      restrict: 'E',
      scope: {
        widgetType: '=',
        output: '='
      }
    };
    return directive;

    function link(scope, element, attrs) {
      var convertedWidgetType = scope.widgetType.widgetName.toDash() + "-form";
      var generatedTemplate = '<' + convertedWidgetType + ' output="\'' + scope.output + '\'" widget-type="\'' + scope.widgetType + '\'"></' + convertedWidgetType + '>';
      element.append($compile(generatedTemplate)(scope));
    }
  }

})();


(function() {
  'use strict';

  angular
    .module('optimizeDashboards')
    .component('barChartForm', {
      template: ` * The form is pretty big plus is not the issue so I have removed it from this example for the sake of brevity * `,
      controller: BarChartFormController,
      controllerAs: '$ctrl',
      bindings: {
        output: '='
      }
    });


  BarChartFormController.$inject = ['$timeout', 'languageService', 'barChartFormService', '$uibModalStack', 'widgetFormModalService'];

  function BarChartFormController($timeout, languageService, barChartFormService, $uibModalStack, widgetFormModalService) {

    var $ctrl = this;

    $ctrl.$onInit = function() {
      $ctrl.translation = languageService;
      $ctrl.widgetObject = {};
      $ctrl.widgetObject.parameters = {};
    };

    $ctrl.cancelModal = cancelModal;
    $ctrl.saveWidget = saveWidget;

    function cancelModal() {
      $uibModalStack.dismissAll('cancel');
    }

    function saveWidget() {
      // $ctrl.widgetObject is the final object processed by the form. if console logged in this function it outputs when submit is pressed.
      $ctrl.output = $ctrl.widgetObject;
    }

  }
})();

Answer 1

您需要手动将视图模型传递到编译范围。目前$ctrl.output未定义，这就是它在编译后确实产生undefined字符串的原因。编译函数本身不会评估你的参数。它只是试图编译它。以这种方式undefined参数导致undefined字符串输出。

视图

<widget-form-compiler widgetType="$ctrl.widgetType" 
                      view-model="$ctrl" 
                      output="$ctrl.output">
</widget-form-compiler>

指令

function widgetFormCompiler($compile) {
    // Usage: Generates a widget.
    var directive = {
        link: link,
        restrict: 'E',
        scope: {
            widgetType: '=',
            output: '=',
            viewModel: '='
        }
    };
    return directive;

    function link(scope, element, attrs) {

        scope.$ctrl = scope.viewModel;

        var convertedWidgetType = scope.widgetType.widgetName.toDash() + "-form";
        var generatedTemplate = '<' + convertedWidgetType + ' output="\'' + scope.output + '\'" widget-type="\'' + scope.widgetType + '\'"></' + convertedWidgetType + '>';
        element.append($compile(generatedTemplate)(scope));
    }
}

<强>＆GT; demo fiddle或debug demo fiddle

AngularJS $编译评估范围属性而不是绑定

1 个答案:

视图

指令