如何在我的净化 HTML 字符串中消化我的 Angular 指令？

【问题标题】：How can I digest my Angular directives inside my sanitized HTML string? | AngularJS如何在我的净化 HTML 字符串中消化我的 Angular 指令？ | AngularJS
【发布时间】：2014-06-25 02:08:18
【问题描述】：

在通过 ng-bind-html-unsafe 将 $scope.content 对象插入到 DOM 后，我无法重新编译在 $scope.content 对象中找到的 Angular 代码。有人知道如何让 Angular 消化这段代码吗？提前致谢！

PLUNKER HERE。

###index.html###
<body ng-controller="MainCtrl">
 <h2>HTML Testing</h2>
 <div ng-bind-html-unsafe="content.iPhone"></div>
</body>

###app.js###
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.content = {
    iPhone: "<div ng-style=\"style.iPhoneTest\">This shows up on an iPhone</div>",
    iPad: "<div ng-style=\"style.iPadTest\">This shows up on an iPad</div>",
    androidPhone: "<div ng-style=\"style.androidPhoneTest\">This shows up on an Android          phone</div>",
    androidTablet: "<div ng-style=\"style.androidPhoneTablet\">This shows up on an Android tablet</div>"
  };
  $scope.style = {
    iPhoneTest: {background: 'blue', color: 'black'},
    iPadTest: {background: 'black', color: 'white'},
    androidPhoneTest: {background: 'yellow', color: 'black'},
    androidTabletTest: {background: '#111', color: 'white'}
  };
});

【问题讨论】：

标签： javascript angularjs angularjs-digest

【解决方案1】：

为什么不使用指令而不是注入？

<body ng-controller="MainCtrl">
 <h2>HTML Testing</h2>
 <div ng-my-phones="style"></div>
</body>

app.directive("ngMyPhones", function(){
 return {
   scope: {
    "style": "=ngMyPhones"
   },
   template: '<div ng-style=\"style.iPhoneTest\">This shows up on an iPhone</div>'+
'<div ng-style=\"style.iPadTest\">This shows up on an iPad</div>'+
'<div ng-style=\"style.androidPhoneTest\">This shows up on an Android phone</div>'+
'<div ng-style=\"style.androidPhoneTablet\">This shows up on an Android tablet</div>'
 }
});

否则你必须使用$compile，告诉 Angular 在自定义 html 上应用范围，但这是一种丑陋的方法。

如果您想动态决定显示哪个手机，您可以将$scope.contents 数组传递到指令$compile 中，然后像这样手动附加元素：

<body ng-controller="MainCtrl">
       <h2>HTML Testing</h2>
       <div ng-my-phone="content.iPhone" ng-my-phone-style="style"></div>
     </body>
</html>


 app.directive("ngMyPhone", function($compile){
  return {
    scope: {
      "ngMyPhone": "=",
      "style": "=ngMyPhoneStyle"
    },
    link: function($scope, $element){
       var oldPhoneElement; 

       //Everytime the phone
       $scope.$watch("ngMyPhone", function(newContent){
         angular.element(oldPhoneElement).remove();
         oldPhoneElement = angular.element(newContent);

         $compile(oldPhoneElement)($scope);
         $element.append(oldPhoneElement);
       });
    }
  };
});

WORKING PLUNKER

【讨论】：

完美运行。非常感谢！