Javascript 如何在经过消毒的HTML字符串中消化角度指令安格拉斯_Javascript_Angularjs_Angularjs Digest

Javascript 如何在经过消毒的HTML字符串中消化角度指令安格拉斯

javascript angularjs

Javascript 如何在经过消毒的HTML字符串中消化角度指令安格拉斯,javascript,angularjs,angularjs-digest,Javascript,Angularjs,Angularjs Digest,在通过ng bind html将$scope.content对象插入DOM后，重新编译$scope.content对象中的角度代码时遇到问题。有人知道如何使用此代码吗？提前谢谢你 ###index.html### HTML测试 ###app.js### var app=angular.module（'plunker'，[]）；应用程序控制器（'MainCtrl'，函数（$scope）{ $scope.content={ iPhone：“这显示在iPhone上”， iPad：“这会出现在iP

在通过ng bind html将$scope.content对象插入DOM后，重新编译$scope.content对象中的角度代码时遇到问题。有人知道如何使用此代码吗？提前谢谢你

###index.html###
HTML测试
###app.js###
var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.content={
iPhone：“这显示在iPhone上”，
iPad：“这会出现在iPad上”，
androidPhone：“这显示在Android手机上”，
androidTablet：“这显示在Android平板电脑上”
};
$scope.style={
iPhoneTest:{背景：“蓝色”，颜色：“黑色”}，
iPadTest:{背景：“黑色”，颜色：“白色”}，
androidPhoneTest:{背景：“黄色”，颜色：“黑色”}，
AndroidTableTest:{背景：'#111'，颜色：'白色'}
};
});

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

<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>'
 }
});

工作正常。非常感谢！

<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>'
 }
});

<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);
       });
    }
  };
});