Jak dynamicznie przekazywać nazwę dyrektywy niestandardowej w atrybucie klasy znacznika div?

Jestem bardzo nowy w AngularJS. Zrobiłem dyrektywę niestandardowąuser i chcę wywołać go dynamicznie w atrybucie klasy za pomocą zmiennej. na przykład$scope.dirName = "user"; Kiedy używam tej zmiennej w poniższym kodzie:

<div class = {{dirName}}></div>

Jego wynik musi pokazywać dwa pola wejściowe o określonych wartościach. Ale tak nie jest. Kiedy wymieniam{{dirName}} zuser. Działa dobrze, oznacza to, że dwa pola wejściowe są pokazane z wartościami jak określono. Czy ktoś może powiedzieć, jaki błąd popełniam?

To jest index.html

<div ng-controller = "Ctrl">
<form name = "myForm">
  <div class = {{dirName}}></div>
  <hr>
  <tt>userName : {{user}}</tt>
</form>

To jest script.js

<pre>var app = angular.module('App',[]);

app.controller('Ctrl', function($scope){
 $scope.user = {name:'adya',last:'Rajput'};
 $scope.dirName = "user";
});

app.directive('user',function(){
 return{
   restrict:'C',
   templateUrl:'template.html'
 };
});</pre>

template.html zawiera:

UserName : <input type='text' name='userName' ng-model='user.name' required>
LastName : <input type='text' name='lastName' ng-model='user.last'>

questionAnswers(1)

yourAnswerToTheQuestion