Javascript 动态更新模板'；将Html放在角度指令中_Javascript_Html_Angularjs

Javascript 动态更新模板'；将Html放在角度指令中

javascript html angularjs

Javascript 动态更新模板'；将Html放在角度指令中,javascript,html,angularjs,Javascript,Html,Angularjs,我有一个名为customStyles的自定义指令，其定义如下： scrollbackApp.directive('customStyles', function(){ return{ restrict: 'E', template: '<style> {{styleString}} </style>', scope: { conversations : '=' },

我有一个名为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;
            });
        }
    }
});

scrollbackApp.directive（'customStyles'，function（）{ 返回{ 限制：'E'，模板：{{styleString}}}，范围：{ 对话：'=' }, 链接：函数（$scope、elem、attrs）{ $scope.$watch（'conversations'，函数（值）{ //基于值计算str $scope.styleString=str； }); } } }); 我正在将此指令添加到Html视图的主体中：

<body>
  <custom-styles conversations="convList"> </custom-styles>
</body>

并且

convList

的值在父控制器范围内更改。目前，当上述指令呈现为Html时，

{{{styleString}}

绑定保持为字符串，而不是更改为其值。我希望指令的html根据

styleString

的值动态更改。这在Angular中可能吗？

您应该在视图中重命名指令标记：

<custom-styles conversations="convList"> </custom-styles>

下面是一个工作示例：

你能举一个styleString的例子吗？顺便说一句，函数（值）应该是函数（str），我将

str

更改为

value

，因为我不知道您的str计算逻辑。我还将标签

更改为

，以查看模型的更改。感谢您的回答，我最初使用了

自定义样式

作为指令名称。这是我问题中的一个错误。即便如此，我还是应该看看你在这里做了什么不同。没什么不同。只更改了指令名！