如何在div标签的class属性中动态传递自定义指令名称?
我是AngularJS的新手。我做了一个自定义指令user
,我想通过使用变量在类属性中动态调用它。例如,$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'>
回答:
不幸的是,您无法将指令名称保存在字符串变量中,也无法在HTML中访问它们。你可以,但是,保存一个字符串中的变量$scope
和使用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>
不起作用的更新问题,它发生是因为angular
$compile
s指令仅执行一次。如果您先是$interpolate
模板的内容(将替换{{dirName}}
为ng-
user),然后$compile
在将其输入HTML之前先进行显式显示,则它应该可以工作。
以上是 如何在div标签的class属性中动态传递自定义指令名称? 的全部内容, 来源链接: utcz.com/qa/404269.html