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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在div标签的class属性中动态传递自定义指令名?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是AngularJS的新手.我已经创建了一个自定义指令用户,我想通过使用变量在class属性中动态调用它.
例如$scope.dirName =“user”;
当我在下面的代码中使用此变量时:
<div class = {{dirName}}></div>

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

这是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'>
遗憾的是,您无法在字符串变量中保存指令名称并在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(将用ng-user替换{{dirName}})然后在HTML中输入之前显式$编译它,它应该可以工作.

猜你在找的Angularjs相关文章