自定义 $compile 指令有时仅适用于同一范围答案

【问题标题】：custom $compile directive applies only sometimes in same scope自定义 $compile 指令有时仅适用于同一范围
【发布时间】：2016-04-11 15:12:14
【问题描述】：

感谢您的关注。我会直接潜入：

JSON 对象具有带有 ng-click 属性的 HTML 链接，使用 ng-bind-html 和 $sce 的 trustAsHtml 以确保 HTML 安全。在将 json 加载到 $q 承诺中后，我还使用自定义 angular-compile 指令将角度点击侦听器编译到应用程序中。

乍一看，所有这些都按预期工作......

JSON

{ 
 "text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?" 
}

查看

<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])"
data-angular-compile></p>

指令

angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
    $compileProvider.directive('angularCompile', ["$compile", function($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    return scope.$eval(attrs.angularCompile);
                },
                function(value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                }
            );
        };
    }])
}]);

问题：

好的，这样就可以了。我的应用程序加载，它提供安全的 HTML，我的 ng-click 打开模式，传递它的参数。我在周围的p 标记上看到class='ng-binding'，在生成的html 中的a 标记上看到class="ng-scope"。万岁！

接下来的工作是将该数据写入另一个跟踪进度的模型中，并在另一个视图中通过相同的ng-bind、trustAsHTML、angular-compile treatment 运行它。只需将数据复制到同级对象中即可。

这就是失败的地方！

<p data-ng-bind-html="__services.trustAsHTML(__state.modal.text)"
data-angular-compile></p>

在第二个视图中，它是同一页面上同一范围 ($rootScope) 中的模式 - 绑定和 trustAsHTML Angular 被应用。但是链接不可点击，在a标签上没有生成class="ng-scope"。

如果进一步解释我的设置可能有助于理解问题，请在此处详细说明。所有初始应用程序均由礼宾部设置，并将大部分数据存储在 $rootScope 中：

    return angular
        .module('app', [
        'ngResource',
        'ngSanitize',
        'ui.router',
        'oslerApp.controllers.GuideController',
        'oslerApp.services.ConciergeService',
        'oslerApp.services.DataService',
        'oslerApp.services.LocationService',
        'oslerApp.services.StatesService',
        'oslerApp.directives.AngularCompile',

    ])
    .config(function($stateProvider, $urlRouterProvider) {
      // For any unmatched url, redirect to landing
      $urlRouterProvider.otherwise("/");

      // Now set up the states
      $stateProvider
        .state('guide', {
          url: "/guide",
          templateUrl: "views/guide.html",
          controller: 'GuideController as guide'
        })
        .state('contact', {
          url: "/contact",
          templateUrl: "views/contact.html"
        })
    })
    .run(function(ConciergeService) {
        ConciergeService.init();
    });

我花了 2 天时间重构我的整个网站，看看是不是因为模态在它自己的指令中，但是把它放在同一个模板和范围内似乎对我没有帮助。

【问题讨论】：

标签： javascript angularjs json angularjs-directive angularjs-rootscope

【解决方案1】：

教训：如果你必须重构所有东西，但仍然没有进步，那你就错了。

为了解决这个问题，2天后拔头发，我做了一个小小的服务，并通过它传递问题文本：

        compiler: function(element, template, content, scope) {
            element = $(element);
            template = template[0] + content + template[1];
            var linkFn = $compile(template);
            content = linkFn(scope);

            element.replaceWith(content);
        },

【讨论】：