私はこの問題に2日間取り組んできました。もっとシンプルにすべきだと感じています。
問題の説明
次のように使用されるディレクティブを作成したいと思います。
<my-directive ng-something="something">
content
</my-directive>
そして出力として持っています：
<my-directive ng-something="something" ng-more="more">
content
</my-directive>
当然のことながら、いくつかの作業を行うリンク関数とコントローラーがありますが、主な懸念事項は次のとおりです。
- DOM 要素は元の名前を保持するため、直感的な CSS スタイルを適用できます。
- すでに存在する属性ディレクティブが適切に機能し続けること、および
- 新しい属性ディレクティブは、要素ディレクティブ自体によって追加できます。
例
たとえば、クリックされたときに内部で何かを行う要素を作成したいとします。
<click-count ng-repeat="X in ['A', 'B', 'C']"> {{ X }} </click-count>
これは、次のようなものにコンパイルできます。
<click-count ng-click="internalFn()"> A </click-count>
<click-count ng-click="internalFn()"> B </click-count>
<click-count ng-click="internalFn()"> C </click-count>
whereは、ディレクティブinternalFnの内部スコープで定義されます。clickCount
試み
私の試みの 1 つは、このプランカーです: http://plnkr.co/edit/j9sUUS?p=preview
Plunker がダウンしているように見えるので、コードは次のとおりです。
angular.module('app', []).directive('clickCount', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
ccModel: '='
},
compile: function(dElement) {
dElement.attr("ngClick", "ccModel = ccModel + 1");
return function postLink($scope, iElement, iAttrs, controller, transclude) {
transclude(function(cloned) { iElement.append(cloned); });
};
},
controller: function ($scope) {
$scope.ccModel = 0;
}
};
});
これは、ディレクティブを使用した HTML です。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<hr> The internal 'ng-click' doesn't work:
<click-count ng-repeat="X in ['A', 'B', 'C']" cc-model="counter">
{{ X }}, {{ counter }}
</click-count>
<hr> But an external 'ng-click' does work:
<click-count ng-repeat="X in ['A', 'B', 'C']" cc-model="bla" ng-init="counter = 0" ng-click="counter = counter + 1">
{{ X }}, {{ counter }}
</click-count>
<hr>
</body>
</html>
また、要素はその名前を保持するため、css は次のように使用できます。
click-count {
display: block;
border: solid 1px;
background-color: lightgreen;
font-weight: bold;
margin: 5px;
padding: 5px;
}
何が問題なのかについていくつかのアイデアがありますが、いくつかの代替アプローチを試しました。リンカーをいじった場合、おそらくもう一度試してみると$compile、コントローラー関数も2回呼び出す必要があります。とにかく、それを適切に行う方法の例をいただければ幸いです。