Angular 指令未在 UI Bootstrap 模态打开时执行

Question

我正在构建一个单页网站，这是我第一次在网站上使用 Angular。也在 Laravel 之上为后端构建它，但这超出了这个问题的范围。

我需要能够在主页视图上打开一个模式，该模式将添加新资源（例如新客户端）或编辑资源。当调用$uibModal.open() 的控制器并将$scope.modalBody 设置为等于注入的items.modalBody 时，我想以某种方式在模态主体中获取表单的html（唯一可行的方法是如果我使用：

$scope.modalBody = $sce.trustAsHtml(items.modalBody);

现在唯一的问题是 HTML 正文中的任何内容，Angular 都不会使用它的魔法并进行任何数据绑定。它仍然是原始形式的

{{ object.property }} 或者因为我使用 Laravel 并避免与 Blade 模板引擎冲突：

<% object.property %>

看截图： screenshot

我一直在用头撞墙...我尝试将$scope.$apply() 放入我的指令和控制器中，但两者都不起作用。我有一种感觉，这是我的问题的根源。我还尝试将 html 设为 <new-client></new-client> 指令并使用 templateUrl: 'views/clients/add.php'，这将是理想的，但模板未包含在 <new-client></new-client> 中。

我正在使用 ui-bootstrap 0.14.3 和 Angular 1.4.8。

这可能是一个错误吗？还是我做错了什么？任何人都有更好的方法将表单放入我的模态？让我知道你想看什么代码，这样我就不会用不必要的代码块把这篇文章弄乱了。

Answer 1

我在使用 jQuery 的 AJAX 接收模板字符串并将其附加到服务器时遇到了类似的问题。

所以当通过 jQuery 添加 HTML、绑定 html 字符串等时，angular 并不知道它需要自动compile 这个数据。

你需要做的是使用$compile服务，$compile你的html然后附加正确的$scope到它：

`$compile('jQuerySelectorReturningHtmlOrAnHTMLStringThatNeedsToBeCompiled')($scope);`

multiple examples in Angulars Documentation for $compile 可以让您了解正在发生的事情。我认为根据您所描述的情况，您的情况也正在发生同样的事情。

关键是在html绑定到页面后调用这个$compile服务函数。

编辑：

还有一些基于某些 cmets 的其他选项，它们将作为在您的视图上呈现此内容的可行解决方案。例如一个指令，它接受一个字符串属性来表示你想要的视图的 HTML 字符串。

1。在编译步骤修改你的指令模板：

您可以在指令编译并将任何属性绑定到该指令范围之前修改您的模板：

app.directive('myAwesomeCompileStepDirective', [myAwesomeCompileStepDirectivef]);

function myAwesomeCompileStepDirectiveFn() {
  return {
    restrict: 'EA',
    compile: function compileFn(tAttrs, tElement) {
      //Here you can access the attrs that are passed into your directive (aka html string)
      tElement.html(tAttrs['stringThatYouWantToReplaceElementWith']);

      return function linkFn(scope, element, attrs, controller, transcludeFn) {
        //if all you want to do is update the template you really don't have to do anything
        //here but I leave it defined anyways.
      }
    }
  }
}

您可以查看file I wrote for a npm component，它使用此方法在页面上编译我的指令模板之前对其进行修改，您还可以查看 codepen for the complete component 以查看它的实际效果。 p>

2。使用 $compile 服务在使用指令 attrs 的链接函数中调用 $compile。

与上述方法相同，您可以改为注入$compile服务，并调用上述函数。这为您提供了更多工作，但更灵活地监听事件和执行基于范围的功能，这在选项 1 中的 compile 函数中不可用。