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

Question

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

我需要能够在主页面视图上打开模式，这将添加新资源（例如新客户端）或编辑资源。我希望以某种方式在调用$uibModal.open()的控制器时将形式的html放在模态体内，并将$scope.modalBody设置为等于注入的items.modalBody（唯一的方法就是如果我使用方法：

$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＆＃39; AJAX接收模板字符串并将其附加到服务器。

因此，当通过jQuery，绑定的html字符串等添加HTML时，angular并不知道它需要自动compile这些数据。

您需要做的是使用$compile服务，$compile您的HTML，然后将正确的$scope附加到其中：

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

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

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

编辑：

根据一些评论，还有一些其他选项可用作在视图中呈现此内容的可行解决方案。例如，一个带有表示所需视图的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 以查看其实际效果。

2。使用$ compile服务使用指令attrs。

在链接函数中调用$ compile

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

Angular Directive未在UI Bootstrap模式上执行打开

1 个答案:

编辑：

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

2。使用$ compile服务使用指令attrs。