Question

我对AngularJS很新。我已经制作了一个自定义指令user，我想通过使用变量在class属性中动态调用它。例如$scope.dirName = "user"; 当我在下面的代码中使用此变量时：

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

其结果必须显示两个具有指定值的输入字段。但事实并非如此。当我用{{dirName}}替换user时。它工作正常，意味着两个输入字段显示为指定的值。谁能告诉我，我在做什么错误？

这是index.html

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

这是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包含：

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

Answer 1

不幸的是，您无法在字符串变量中保存指令名称并在HTML中访问它们。但是，您可以在$scope和use ng-switch中的变量中将字符串保存到选择正确的指令：

<div ng-switch="dirName">
    <div ng-switch-when="ng-user">
      <div ng-user></div>
    </div>

    <div ng-switch-when="...">
      ...
    </div>
</div>

但是，现在最好使用比ng-user 切换更具描述性的内容。

旁注：请勿在自己的指令中使用 ng - 前缀。 Angular使用该前缀，以便它不会与其他名称空间冲突。您应该为指令使用自己的前缀。

更新：有关<div class="{{dirName}}"></div>无效的原因的更新问题，因为角度$compiles the directive只发生过一次。如果您首先$interpolate模板的内容（将{{dirName}}替换为ng-user），然后在HTML中输入之前明确$compile，那么它应该有效。< / p>

如何在div标签的class属性中动态传递自定义指令名？

1 个答案: