親愛なるプログラマーの皆さん、Angular.JS を学ぼうとしているときに、自分では解決できない問題に遭遇しました。したがって、私は親切にあなたの助けを求めます:)最初から、最適とは言えないコードについてお詫びしたいと思います...私はjavascriptとangular.jsで「冒険」を始めたばかりです:/
次の機能を提供する「単純な」Webアプリケーションを作成しようとしています:
ノードのリストがあります
<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">
<a ng-click="appendChassis()">{{node.nazwa}}</a>
<button class="btn"><i class="icon-plus-sign"></i> add</button>
<div some-stuff="myToggle($index)" class="someStuff" id="dupa{{node.id}}"></div>
</div>
これらのノードは、db クエリから取得されます。各ノードには多数のデバイスがあります。デバイスの名前をクリックした後
<a ng-click="appendChassis()">{{node.nazwa}}</a>
終えた
$scope.appendChassis = function() {
var index = this.$index;
$scope.myIndex = index;
$scope.chassis = Chassis.query({nodeId: $scope.nodes[index].id});
}
このノードに属するデバイスのリストについて、db に別のクエリを作成したいと思います。その後、そのリストをタグの下の div に追加したいと思います。
ディレクティブを使用してそのような機能を実現しようとしていました
var Powiadomienia = angular.module("Powiadomienia",["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
//when('/tt/:ttId', { controller: ListTT, templateUrl: 'ttList.html' }).
otherwise({ redirectTo: '/' });
}).directive('someStuff', function () {
return {
restrict: 'E,A',
transclude: true,
templateUrl: 'chassies.html',
scope: true,
//link: function($scope, $element, $attrs, $controller) {
link: function(scope, element, attrs, controller) {
$scope.Chassis_instance.query({nodeId: $scope.nodes[$scope.myIndex].id});
if(scope.$eval(attrs.someStuff)) {
// remove '<div ng-if...></div>'
element.replaceWith(element.children())
} else {
element.replaceWith(' ')
}
}
}
});
このソリューションは部分的に機能します。つまり、ノード リンクをクリックするとクエリが作成され、デバイス (シャーシ) のリストが DOM に適用されますが、シャーシは ng-repeat にあるすべての someStuff 要素に追加されます。シャーシを 1 つの特定のクリックされたノードだけに適用したいので、これは明らかに間違っています。