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.
希望这可以帮助。