Walter Wu Walter Wu - 6 months ago 21
HTML Question

My custom directive is not working

Here is my code:
I expect it to generate a div with a

<textarea>
or an
<ul>
following the
scope.current.type
from DB and set the
scope.current.content
in them.

But it doesn't work , on my page just simply show
<contentDirective></contentDirective>


app.directive("contentDirective", function($compile) {
return {
restrict: 'E',
replace: true,
template: "<div class='new__content__input new__content__input-text'></div>",
link: function(scope, element, attrs) {
if (scope.current.type === 'Text') {
var DOM = "<textarea>" + scope.current.content + "</textarea>";
element.append(node);
} else if (scope.current.type === 'Quote') {
var DOM = "<textarea>" + scope.current.content + "</textarea>";
element.append(node);

} else if (scope.current.type === 'List') {

var ul = "<ul>";
for (var i = 0; i < scope.current.content.length; i++) {
ul += "<li>" + scope.current.content[i] + "</li>";
}
ul += "</ul>";
element.append(ul);
}
}
};
});


And my html :

<li ng-repeat="doc in who_u_r" ng-init=" current = doc " class="new__content__input__single clearfix">
<contentDirective></contentDirective>
<li>


Thank you very much for helping

Answer

Change to This, Angular converts camelCasing to snake-casing,In this case, the name must be written using dashes and each dash represents a capital letter from the directive definition.

<content-directive></content-directive>