我有一个名为customStyles的自定义指令,定义为:
scrollbackApp.directive('customStyles', function(){
return{
restrict: 'E',
template: '<style> {{styleString}} </style>',
scope: {
conversations : '='
},
link: function($scope, elem, attrs){
$scope.$watch('conversations', function(value){
// calculate str based on value
$scope.styleString = str;
});
}
}
});
我正在将此指令添加到我的Html视图的主体中:
<body>
<custom-styles conversations="convList"> </custom-styles>
</body>
convList
的值在父控制器范围内发生变化。如上所述,当上述指令呈现为Html时,{{styleString}}
绑定仍为字符串,而不是更改为其值。我希望指令的html根据styleString
的值动态更改。这在Angular中是否可行?
答案 0 :(得分:1)
您应该在视图中重命名指令标记:
<custom-styles conversations="convList"> </custom-styles>
以下是工作示例: