我的观点是这样的:
<html lang="en" ng-app="localjhourlad">
......
<ng-carousel-item
title="AngularJS custom directive's title attribute"
content="I am a custom attribute, as well!"
thumbnail="/img/logo.png">
</ng-carousel-item>
在我的 app.js 文件上:
var ngApp = angular.module("localjhourlad", ['ngRoute']);
ngApp
.config(['$interpolateProvider',
function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
//Custom Directives
ngApp
.directive('ngCarouselItem', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="item">' +
'<div style="background-image: url([[thumbnail]])">' +
'<div class="carousel-caption">' +
'<h3>[[title]]</h3>' +
'<p class="hidden-sm hidden-xs">[[content]]</p>' +
'</div>' +
'</div>' +
'</div>'
}
});
一切都按预期工作，因为我看到自定义指令元素被指令的模板替换，只有表达式绑定(bind)没有被属性值替换，即:
<div class="item"
title="AngularJS custom directive's title attribute"
content="I am a custom attribute, as well!"
thumbnail="/img/logo.png">
<div style="background-image: url()">
<div class="carousel-caption">
<h3 class="ng-binding"></h3>
<p class="hidden-sm hidden-xs ng-binding"></p>
</div>
</div>
</div>
我现在没有主意了。任何帮助将非常感激。
最佳答案
尝试在指令定义对象中添加“范围”
ngApp
.directive('ngCarouselItem', function() {
return {
restrict: 'E',
replace: true,
scope: {
thumbnail: "@",
title: "@",
content: "@"
}
template: '<div class="item">' +
'<div ng-style="background-image: url([[thumbnail]])">' +
'<div class="carousel-caption">' +
'<h3>[[title]]</h3>' +
'<p class="hidden-sm hidden-xs">[[content]]</p>' +
'</div>' +
'</div>' +
'</div>'
}
});
关于javascript - AngularJs:自定义指令的动态模板不替换属性值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29891031/