Dynamically updating the template's Html in an Angular directive
Question
I have a custom directive called customStyles, which is defined as :
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;
});
}
}
});
I'm adding this directive to the body of my Html view:
<body>
<custom-styles conversations="convList"> </custom-styles>
</body>
And the value of convList changes inside the parent controller scope. As present, when the above directive renders to Html, the {{styleString}} binding remains as a string, instead of changing into it's value. I want the html of the directive to change dynamically based on the value of styleString . Is this possible in Angular?
1 answers
solution1
1 2014-02-19 12:29:00
You should rename directive tag in view:
<custom-styles conversations="convList"> </custom-styles>
Here is working example:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.