Contidional模板 - 指令'mdRadioButton'所需的控制器'mdRadioGroup'无法找到

问题描述 投票：9回答：4

我正在尝试构建自定义指令，以便我在调查中显示问题。因为我有多种类型的问题，所以我考虑创建单个指令并根据问题类型更改它的模板。

我的指示：

directive('question', function($compile) {
  var combo = '<div>COMBO - {{content.text}}</div>';
  var radio = [
    '<div>RADIO - {{content.text}}<br/>',
    '<md-radio-group layout="row" ng-model="content.answer">',
    '<md-radio-button ng-repeat="a in content.answers track by $index" ng-value="a.text" class="md-primary">{{a.text}}</md-radio-button>',
    '</md-radio-group>',
    '</div>'
  ].join('');
  var input = [
    '<div>INPUT - {{content.text}}<br/>',
    '<md-input-container>',
    '<input type="text" ng-model="content.answer" aria-label="{{content.text}}" required md-maxlength="10">',
    '</md-input-container>',
    '</div>'
  ].join('');

  var getTemplate = function(contentType) {
    var template = '';

    switch (contentType) {
      case 'combo':
        template = combo;
        break;
      case 'radio':
        template = radio;
        break;
      case 'input':
        template = input;
        break;
    }

    return template;
  }

  var linker = function(scope, element, attrs) {

    scope.$watch('content', function() {
      element.html(getTemplate(scope.content.type))
      $compile(element.contents())(scope);

    });
  }

  return {
    //require: ['^^?mdRadioGroup','^^?mdRadioButton'],
    restrict: "E",
    link: linker,
    scope: {
      content: '='
    }
  };
})

在我的主控制器内部，我有问题列表，点击按钮后，我正在设置分配给我的指令的当前问题。

对于第一个问题，一切正常，但在我将当前问题设置为无线电类型后，我收到此错误：

错误：[$ compile：ctreq]无法找到指令'mdRadioButton'所需的控制器'mdRadioGroup'！

我已经尝试将required添加到我的指令中，如下所示，但它没有帮助。

require: ['^mdRadioGroup'],

我无法弄清楚最近发生了什么，因为我还是刚开始有角度的。

我创建了Plunker来展示我的问题：http://plnkr.co/edit/t0HJY51Mxg3wvvWrBQgv?p=preview

重现此错误的步骤：

  1. 打开Plunker
  2. 单击Next按钮两次（导航到问题3）
  3. 在控制台中查看错误

编辑： 我编辑了我的Plunker所以我的问题模型是可见的。我能够选择答案，即使是在错误问题模型正在更新的问题中也是如此。但是在回答问题3时我仍然会收到错误。

javascript angularjs angularjs-material
4个回答
3
投票

我只是简单地扩展一个基本指令，然后有一个具有不同指令名称的专用指令。

// <div b></div>
ui.directive('a', ... )
myApp.directive('b', function(aDirective){
   return angular.extend({}, aDirective[0], { templateUrl: 'newTemplate.html' });
});

代码取自https://github.com/angular/angular.js/wiki/Understanding-Directives#specialized-the-directive-configuration

3
投票

Working Demo

无需为您的要求创建和使用指令。

您可以使用角度模板和ng-include条件。

您可以在页面上创建三个模板（每个模板用于组合，广播和输入），如下所示，

<script type="text/ng-template" id="combo">
    <div>COMBO - {{content.text}}</div>
</script>

并使用ng-include将这些模板包含在div中。

<!-- Include question template based on the question -->
<div ng-include="getQuestionTemplate(question)">

在这里，getQuestionTemplate()将返回应包含在此div中的模板的id。

// return id of the template to be included on the html
$scope.getQuestionTemplate = function(content){
    if(content.type == "combo"){
      return 'combo';
    }
    else if (content.type == "radio"){
      return 'radio';
    }
    else{
      return 'input';
    }
}

就这样。你完成了。

请随时向我提出任何疑问。

2
投票

我用你的代码玩了一下，发现错误发生的原因是因为第3个问题得到的答案比第2个问题多，所以当你第一次创建mdRadioGroup时它定义了4个$ index索引，后来又问了问题3 6个答案出界...所以一个不优雅的解决方案是创建尽可能多的$ index作为任何问题的最大答案，第一次，只显示带文字的那些...

.directive('question', function($compile) {
var combo = '<div>COMBO - {{content.text}}</div>';
var radio = [
'<div>RADIO - {{content.text}}<br/>',
'<md-radio-group layout="row">',
'<md-radio-button ng-repeat="a in content.answers track by $index" ng-show={{a.text!=""}} value="{{a.text}}" class="md-primary">{{a.text}}</md-radio-button>',
'</md-radio-group>',
'</div>'
].join('');
var input = [
'<div>INPUT - {{content.text}}<br/>',
'<md-input-container>',
'<input type="text" ng-model="color" aria-label="{{content.text}}" required md-maxlength="10">',
'</md-input-container>',
'</div>'
].join('');

var getTemplate = function(contentType) {
var template = '';

switch (contentType) {
  case 'combo':
    template = combo;
    break;
  case 'radio':
    template = radio;
    break;
  case 'input':
    template = input;
    break;
}

return template;
}

然后在所有问题中每次更改问题以获得最大答案数量：

$scope.questions = [{
type: 'radio',
text: 'Question 1',
answers: [{
  text: '1A'
}, {
  text: '1B'
}, {
  text: '1C'
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}]
}, {
type: 'input',
text: 'Question 2',
answers: [{
  text: '2A'
}, {
  text: '2B'
}, {
  text: '2C'
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}]
}, {
type: 'radio',
text: 'Question 3',
answers: [{
  text: '3A'
}, {
  text: '3B'
}, {
  text: '3C'
}, {
  text: '3D'
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}]
}, {
type: 'combo',
text: 'Question 4',
answers: [{
  text: '4A'
}, {
  text: '4B'
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}, {
  text: ''
}]
}];

其余的代码是一样的。正如我之前所说，没有优雅，肯定有更好的选择，但现在可能是一个解决方案......

2
投票

如果有人想知道，问题是父组件的范围用于编译每个新元素。即使删除了该元素，该范围上的绑定仍然存在（除非被覆盖），这可能导致OP看到的错误（甚至更糟的内存泄漏）。

这就是为什么在强制操作元素的HTML内容时应该注意清理，就像这样。而且因为要做到这一点很棘手，所以通常不鼓励这样做。大多数用例应该由内置指令覆盖（例如，用于OP的情况下的ngSwitch），它们会自行清理。

但是你可以在一个简化的场景（如这里的那个）中手动清理。在最简单的形式中，它涉及为每个编译的内容创建一个新的子范围，并在删除内容后销毁它。

以下是修复OP的插件所需要的：

之前

scope.$watch('content', function() {
  element.html(getTemplate(scope.content.type))
  $compile(element.contents())(scope);
});

后

var childScope;
scope.$watch('content', function() {
  if (childScope) childScope.$destroy();
  childScope = scope.$new();
  element.html(getTemplate(scope.content.type))
  $compile(element.contents())(childScope);
});

这是fixed version。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.