在Angular指令中动态更新模板的HTML

Question

我有一个名为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中可能吗？

Answer 1

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

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

这是工作示例：

http://plnkr.co/edit/aOxf3fgS7Tc0sOyCXoBV?p=preview

在Angular指令中动态更新模板的HTML

问题描述

1 个解决方案

解决方案1
1 2014-02-19 12:29:00

在Angular指令中动态更新模板的HTML

问题描述

1 个解决方案

解决方案1 1 2014-02-19 12:29:00

解决方案1
1 2014-02-19 12:29:00