Question

亲爱的程序员在尝试学习Angular.JS时，我偶然发现了一个我无法解决的问题。所以我请求你的帮助:) 从一开始我就为不太理想的代码道歉...我刚刚用javascript和angular.js开始了我的'冒险'：/

我正在尝试编写一个“简单”的webapp，它将提供以下功能：

我有一个节点列表

<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，但是这些chassies会附加到驻留在ng-repeat中的所有someStuff元素。这显然是错误的，因为我希望将chassies仅应用于一个特定的单击节点。

Answer 1

我认为你不需要指令。我想你可以在你的node.chassies上做一个简单的ng-repeat，或者如你所愿创建一个包含它们的单独对象chassies[nodeid]。类似于以下内容可能会帮助您：

<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">
    <a ng-click="appendChassis(node)">{{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}}">
       <a href='' ng-repeat='device in node.chassies'>{{device.name}}</a>
    </div>
</div>


$scope.appendChassis = function(node) {

    $scope.chassis = Chassis.query({nodeId: node.id}).then(function(data) {
       node.chassies = data;
    });

  }

我创建了一个可以帮助你的小型演示。

http://plnkr.co/edit/Y8ljusc55ziuR478SXVl?p=preview

它有很多文件，但用于此演示的文件是app.js，view1.html，service-utils.js和index.html。

AngularJS - ng-repeat - 有条件地附加html

1 个答案: