我有两个指令,一个是表,另一个是按钮。
但是,当我在button指令中使用templateUrl时,所有按钮都显示在表的同一行中。
但是“模板”可以很好地工作。
任何人都可以帮忙吗?
下面列出了这两个演示的小插曲:
http : //plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview :使用templateUrl
http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview:使用模板
指令myButton1和myButton2之间的唯一区别是:
myButton1使用:
templateUrl:function(element,attrs){
return TEMPLATE_ACTION;
}
“ actionTemplate.html”的内容是:
<div ng-if="config !== undefined">b</div><br/><br/>
myButton2使用:
template:' <div ng-if="config !== undefined">b</div>
',
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.data = [
{name: 'field1', config: {type: 'config1'}},
{name: 'field2', config: {type: 'config2'}}
];
}])
.directive('myGrid', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
template: '' +
'<table>' +
'<tbody>' +
'<tr ng-repeat="item in data">' +
' <td><div><my-button2 config="item.config"></my-button2></div></td>' +
' <td>{{item.name}}</td>' +
'</tr>' +
'</tbody>' +
'</table>',
scope: true
}
}])
.directive("myButton1", ["$compile",
function ($compilee) {
var TEMPLATE_ACTION = 'views/actionTemplate.html';
return {
restrict: "E",
replace: true,
scope: true,
templateUrl: function (element, attrs) {
return TEMPLATE_ACTION;
},
link: function (scope, iElement, iAttrs) {
var config = scope.$eval(iAttrs.config);
scope.config = config;
}
};
}
])
;
但是在指令中使用“模板”的一种方法,效果很好:
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.data = [
{name: 'field1', config: {type: 'config1'}},
{name: 'field2', config: {type: 'config2'}}
];
}])
.directive('myGrid', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
template: '' +
'<table>' +
'<tbody>' +
'<tr ng-repeat="item in data">' +
' <td><div><my-button2 config="item.config"></my-button2></div></td>' +
' <td>{{item.name}}</td>' +
'</tr>' +
'</tbody>' +
'</table>',
scope: true
}
}])
.directive("myButton2", ["$compile",
function ($compilee) {
return {
restrict: "E",
replace: true,
scope: true,
template: '<div ng-if="config !== undefined">b</div>',
link: function (scope, iElement, iAttrs) {
var config = scope.$eval(iAttrs.config);
scope.config = config;
}
};
}
])
;
有可能是一个已知的问题时使用ng-repeat
,templateUrl
,ng-if
和replace:true
在虽然它被认为是固定多次同一时间。
transclude
角度逻辑内部可能存在问题。
ng-if
和ng-repeat
是angular中的两个特殊指令,同时,in中的DOMtemplateUrl
异步加载并暂停编译。这种复杂的情况将以某种方式产生问题。
为避免这种情况,只需使用ng-show
代替ng-if
或template
代替它templateUrl
,或者为templateUrl设置脚本模板以将其放入中$templateCache
。
已知问题参考(或者您可以自己搜索更多Google)
https://github.com/angular/angular.js/issues/14326 https://github.com/angular/angular.js/issues/11855 https://github.com/angular/angular.js/issues/ 7183
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句