自定义 $compile 指令仅有时适用于同一范围
custom $compile directive applies only sometimes in same scope
感谢观看。我马上投入:
一个 JSON 对象有 HTML link 具有 ng-click
属性,使用 ng-bind-html
,具有 $sce
的 trustAsHtml
使 HTML 安全。在 $q
承诺中加载 json 后,我还使用自定义 angular-compile
指令将 angular 点击侦听器编译到应用程序中。
乍一看,所有这些都按预期工作...
JSON
{
"text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?"
}
VIEW
<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。但是link是不可点击的,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 天时间重构我的整个网站,看看是不是因为模式在它自己的指令中,但将它放在相同的模板和范围内似乎对我没有帮助。
经验教训:如果你必须重构所有内容但仍然没有取得进展,那你就错了。
为了解决这个问题,经过 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);
},
感谢观看。我马上投入:
一个 JSON 对象有 HTML link 具有 ng-click
属性,使用 ng-bind-html
,具有 $sce
的 trustAsHtml
使 HTML 安全。在 $q
承诺中加载 json 后,我还使用自定义 angular-compile
指令将 angular 点击侦听器编译到应用程序中。
乍一看,所有这些都按预期工作...
JSON
{
"text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?"
}
VIEW
<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。但是link是不可点击的,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 天时间重构我的整个网站,看看是不是因为模式在它自己的指令中,但将它放在相同的模板和范围内似乎对我没有帮助。
经验教训:如果你必须重构所有内容但仍然没有取得进展,那你就错了。
为了解决这个问题,经过 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);
},