$ scope更改后，Ionic标签无法呈现

Question

我需要根据用户显示可能不同的表单。因此，在登录后，我请求数据并接收带有应显示的输入的JSON：

<form ng-bind-html="output" class="list"></form>

在我的控制器上，我处理这些数据并得到这个HTML：

ExpressJS

在此之后，我使用file

将输出HTML分配给data

我的问题是HTML没有正确呈现，我得到了这个：

而不是：

Answer 1

你在评论中提到：

  

问题是离子指令不会渲染，因为视图已经被渲染。

您可以做的是将您的功能包装在$ionicView.beforeEnter中。这样，您可以在控制器中构建表单，然后在实际输入之前更改$ scope以在视图中呈现它。这很直接。

.controller('YourCtrl', function ($scope){
    $scope.$on("$ionicView.beforeEnter", function(event, data){
       // handle form change inside here
    });
}

$ionicView.beforeEnter上的documentation。处理视图更改之前/之后要处理的内容还有其他变体。

Answer 2

我认为问题在于调用控制器时视图已经呈现。

请改用此指令：

.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

控制器：

.controller('exampleCtrl', function ($scope, $sce) {
    $scope.varname = '<ion-toggle toggle-class="toggle-calm">Facturable</ion-toggle>';
});

以这种方式在您的视图中使用它：

<div dynamic="varname"></div>

我在Ionic论坛中发现了同样的问题，请查看此信息以获取更多信息：

https://forum.ionicframework.com/t/recompile-ng-bind-html/15507