无法在angularjs中执行ng-repeat指令

时间:2022-08-22 09:14:22

I am new to angularjs. I want to dynamically add directives to a div based the titles from controller.. Below is what i tried...

我是angularjs的新手。我想根据控制器的标题动态地将指令添加到div中。以下是我试过的...

Below is the directives and factory i used

以下是我使用的指令和工厂

     QtTemplate.directive("shortanswer",function()
  {
    return{
        restrict:"A",

        templateUrl:'assets/directives/shortAnswer.html'
    }   
  })

    Template.factory("questionList",function()
  {
    var questionList={};
    questionList.testid="1";
    questionList.name="Maths";
    questionList.Questions = 
    [
        {"title":"truefalse"},
        {"title":"shortanswer"} 
    ]
    return questionList;
  })


 Template.controller("questionControl",['$scope','questionList',function($scope,questionList)
  {
    $scope.name = questionList.name;
    $scope.id = questionList.testid;
    $scope.Questions = questionList.Questions;
  }])
Template.directive('dynamicDirective',function($compile)
  {
    return {
      restrict: 'A',scope:{},
      replace: false, 
      terminal: true, 
      priority: 1000, 
      link:function(scope,element,attrs)
      {
        element.attr(scope.$eval(attrs.dynamicDirective),"");
        element.removeAttr("dynamic-directive"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-dynamic-directive");
        $compile(element)(scope);
      }
    };
  });
 QtTemplate.directive("shortanswer",function()
  {
    return{
        restrict:"A",

        templateUrl:'assets/directives/shortAnswer.html'
    }   
  })

Below is how i use ng-repeat

以下是我如何使用ng-repeat

<div ng-repeat="Questions in Questions" >
    <div dynamicDirective="{{Questions.title}}"  ></div>
</div>

This is not working

这不起作用

3 个解决方案

#1


3  

use-kebab-case-in-html

使用-烤肉的病例中,HTML

<div ng-repeat="Question in Questions" >
    <div dynamic-directive="{{Question.title}}"  ></div>
</div>

#2


2  

You need to write dynamic-directive instead of dynamicDirective in your HTML. Camelcase in Javascript needs to be written as snakecase kebab-case in HTML.

您需要在HTML中编写dynamic-directive而不是dynamicDirective。 Javascript中的Camelcase需要用HTML编写为snakecase kebab-case。

#3


0  

Here you are:

这个给你:

<div ng-repeat="Question in Questions" >
    <div dynamicDirective="{{Question.title}}"  ></div>
</div>

Hope this helps.

希望这可以帮助。

#1


3  

use-kebab-case-in-html

使用-烤肉的病例中,HTML

<div ng-repeat="Question in Questions" >
    <div dynamic-directive="{{Question.title}}"  ></div>
</div>

#2


2  

You need to write dynamic-directive instead of dynamicDirective in your HTML. Camelcase in Javascript needs to be written as snakecase kebab-case in HTML.

您需要在HTML中编写dynamic-directive而不是dynamicDirective。 Javascript中的Camelcase需要用HTML编写为snakecase kebab-case。

#3


0  

Here you are:

这个给你:

<div ng-repeat="Question in Questions" >
    <div dynamicDirective="{{Question.title}}"  ></div>
</div>

Hope this helps.

希望这可以帮助。