我希望我正确地表达了我的问题，但我无法在此找到其他任何东西。假设我有一个AngularJS指令，如下所示：
angular.module( 'example', [] ).directive(
'exampleDirective', ['$compile', '$http',
function($compile, $http) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var listOfItems = attrs.listOfItems;
var foo = attrs.foo;
var template =
'<ul>' +
'<li ng-repeat="item in ' + listOfItems + '">'+
'<i ng-click="clicked(item)">'+
'{{item.' + foo + '}}'+
'</i>'+
'</li>'+
'</ul>';
element.html('').append($compile(template)(scope));
}
};
}]);
listOfItems是一个数组，其中包含诸如[{'Name': 'this'}, {'Name': 'that'}]和foo这样的对象，然后是Name。
现在，我想将模板放在它自己的html文件中，并通过http调用加载它。模板在html文件中的外观如何？由于我将无法访问文件中的局部变量，因此我不确定需要更改哪些内容。任何帮助或意见，将不胜感激，谢谢。
您的外部模板将有权访问您的范围变量。
更新的指令：
angular.module( 'example', [] ).directive(
'exampleDirective', ['$compile', '$http',
function($compile, $http) {
return {
restrict: 'A',
// ...
templateUrl: 'my_template.html',
// ...
};
}
]
);
my_template.html：
<ul>
<li ng-repeat="item in ' + listOfItems + '">
<i ng-click="clicked(item)">
{{item.' + foo + '}}
</i>
</li>
</ul>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句