1
私は2つのディレクティブを持っていますが、1つはテーブル、もう1つはボタンです。
しかし、ボタン指示文でtemplateUrlを使用すると、すべてのボタンが表の同じ行に表示されます。
しかし、「テンプレート」はうまくいく可能性があります。
誰でもこれを助けることができますか？
AngularJS：ディレクティブのtemplateUrlの異常な動作（テンプレートは正常に動作します）
これら二つのデモのplunkerを以下に列挙する：
http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview：templateUrl
http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview使用：テンプレートを使用して
ディレクティブmyButton1とmyButton2の唯一の違いがある：
myButton1が使用：
テンプレートURL：function（element、attrs）{
return TEMPLATE_A CTION;
}
"actionTemplate.html" の内容である：
<div ng-if="config !== undefined">b</div><br/><br/>
myButton2が使用：
テンプレート '<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;
}
};
}
])
;
の結果は、2でありますボタンは、次のように同じ行に表示されます。
しかしディレクティブで "テンプレート" 1つの使用、それがうまく機能：
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;
}
};
}
])
;
結果は以下の通りです：
Uは、問題を示すためにバイオリンを作成してもらえますか？私は説明したように自分自身を作成しましたが、結果には何も違いはありませんでした。おそらく 'actionTemplate.html'に何か問題があります。 – MMhunter
plunkerが参照用に作成されています：http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview – Lune