3

亲爱的程序员，在尝试学习 Angular.JS 时，我偶然发现了一个我自己无法解决的问题。因此，我恳请您的帮助 :) 从一开始，我想为不太理想的代码道歉……我刚刚开始使用 javascript 和 angular.js 进行“冒险”：/

我正在尝试编写一个“简单”的网络应用程序，它会提供以下功能：

我有一个节点列表

<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>

这些节点来自数据库查询。每个节点中都有许多设备。点击设备名称后

<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 元素中。这显然是错误的，因为我希望仅将 chassies 应用于一个特定的单击节点。

4

1 回答 1

3

我认为您不需要指令。我认为你可以在你的 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。

于 2013-05-14T16:44:56.693 回答